Glassmorphism 디자인, 반응형 및 다크 모드 지원이 있는 구성 요소
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900"> <div class="container mx-auto p-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- Card 1 --> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20"> <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo1/400/300" alt="Card image"> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3> <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 1. It provides some details about the content.</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/1.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"> pêøvêl</p> </div> </div> </div> </div> <!-- Card 2 --> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20"> <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo2/400/300" alt="Card image"> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3> <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 2. More details about the content can be found here.</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/1.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">Designer</p> </div> </div> </div> </div> <!-- Card 3 --> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20"> <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo3/400/300" alt="Card image"> <div class="p-6"> <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3> <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 3, providing additional information.</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/2.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">Developer</p> </div> </div> </div> </div> </div> </div> </div>
Material Design과 단색 색 구성표를 사용한 전자 상거래를 위한 반응형 미디어 구성 요소입니다.
Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Glassmorphism 미디어 구성 요소
예약/예약 시스템을 위한 단순하고 브루탈리즘 스타일의 미디어 구성 요소로, 높은 대비와 보색 구성표를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.