사용자 프로필 구성 요소
Tailwind CSS를 사용하여 Brutalism 스타일로 설계된 사용자 프로필 구성 요소로, 단색 색 구성표를 특징으로 하며 소셜 네트워킹을 위한 인터페이스를 제공합니다. 다크 모드를 지원하며 반응형입니다.
HTML 코드
<div class="flex flex-col items-center justify-center bg-gray-900 p-6 rounded-lg shadow-lg dark:bg-gray-800">
<h1 class="text-4xl text-white font-bold mb-4">User Profiles</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=1" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">John Doe</h2>
<p class="text-gray-400 text-center mb-2">@johndoe</p>
<p class="text-gray-300 text-center">Web Developer<br>Based in San Francisco</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=2" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">Jane Smith</h2>
<p class="text-gray-400 text-center mb-2">@janesmith</p>
<p class="text-gray-300 text-center">Graphic Designer<br>Based in New York</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
<img src="https://picsum.photos/200/300?random=3" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
<div class="p-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
<h2 class="text-2xl text-white font-semibold text-center">Alex Johnson</h2>
<p class="text-gray-400 text-center mb-2">@alexjohnson</p>
<p class="text-gray-300 text-center">Content Creator<br>Based in Austin</p>
<button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
</div>
</div>
</div>
</div>