사용자 프로필 구성 요소
트라이어딕 색 구성표가 있는 브루탈리즘 스타일로 디자인된 사용자 프로필 구성 요소로, 블로그/콘텐츠 소비에 적합한 적당한 복잡성과 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.
HTML 코드
<div class="container mx-auto p-6">
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">User Profiles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Profile 1 -->
<div class="bg-yellow-300 dark:bg-yellow-800 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
<p class="text-gray-700 dark:text-gray-200">Content Writer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Passionate about writing and sharing knowledge."
</p>
<img src="https://picsum.photos/200/100" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Profile 2 -->
<div class="bg-blue-400 dark:bg-blue-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h3>
<p class="text-gray-700 dark:text-gray-200">Graphic Designer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Creating visuals that tell a story."
</p>
<img src="https://picsum.photos/200/100?grayscale" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Profile 3 -->
<div class="bg-green-500 dark:bg-green-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Mike Brown</h3>
<p class="text-gray-700 dark:text-gray-200">Web Developer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Building interactive web experiences."
</p>
<img src="https://picsum.photos/200/100?blur" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
</div>
</div>
관련 구성 요소
사용자 프로필 구성 요소 - Luxury Sepia
세피아/갈색 톤의 복잡한 럭셔리 테마 사용자 프로필 구성 요소로, 블로그/콘텐츠 사이트에 최적화되어 있습니다. 우아한 타이포그래피, 반응형 디자인, 다크 모드 지원이 특징입니다.
사용자 프로필 구성 요소
뉴스/저널리즘 웹사이트를 위한 복잡하고 반응이 빠른 사용자 프로필 구성 요소로, 바우하우스에서 영감을 받은 디자인과 밝은 캔디/달콤한 색 구성표 및 다크 모드 지원이 특징입니다. 풍부한 인터페이스를 위해 설계된 프로필 사진, 이름, 직함 및 팔로워 수와 함께 여러 사용자 프로필을 표시합니다.