Neumorphic Cards 컴포넌트
어두운 테마를 지원하는 Neumorphism 스타일로 디자인된 반응형 카드 구성 요소로, 미묘한 그림자와 유연한 레이아웃을 특징으로 합니다.
HTML 코드
<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/200/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a short description of the card content.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">User Name</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/201/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Another Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">More details about the content of this card.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">Another User</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/202/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Third Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of the card content goes here.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">User Three</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
</div>