Glassmorphism 카드 구성 요소
생생한 색상의 Glassmorphism 카드 구성 요소. 어두운 테마를 지원하는 반응형 디자인. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
HTML 코드
<div class="p-10 dark:bg-gray-900 bg-gray-100">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/600/400" alt="Card Image">
<div class="p-6">
<div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-purple-500 text-white rounded-full text-xs font-semibold uppercase">New</div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Blog Post Title</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<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">Aug 18, 2023</p>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/nature/600/400" alt="Card Image">
<div class="p-6">
<div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-pink-500 text-white rounded-full text-xs font-semibold uppercase">Trending</div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Another Blog Post</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<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">Aug 17, 2023</p>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/tech/600/400" alt="Card Image">
<div class="p-6">
<div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-yellow-500 text-white rounded-full text-xs font-semibold uppercase">Featured</div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Yet Another Post</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
<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">Aug 16, 2023</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>