스큐어모픽 카드 컴포넌트
스큐어모피즘(Skeuomorphism)에서 영감을 받은 다음 카드 컴포넌트는 다크 테마 지원으로 완벽하게 반응합니다. 다크 모드의 경우 CSS 지원으로 충분합니다. JavaScript가 필요하지 않습니다.
HTML 코드
<div class="flex flex-wrap justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">
<!-- Card 1 -->
<div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card1/300/200" alt="Random image">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Skeuomorphic Card</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">This is a skeuomorphic-inspired card with a subtle shadow and rounded corners, designed to look like a physical object.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of random user">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Developer</p>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card2/300/200" alt="Random image">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Interactive Design</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Combining modern web practices with classic design principles, this card offers a visually engaging experience.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of random user">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Designer</p>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card3/300/200" alt="Random image">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Responsive Layout</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">This card is built with responsiveness in mind, ensuring it looks great on all devices, from desktops to mobile phones.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar of random user">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400">Project Manager</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom dark shadow for dark mode skeuomorphism */
.dark\:shadow-xl-dark {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}
</style>