Composant Glassmorphism Cards
Composants de cartes Glassmorphism aux couleurs vives. Conception réactive avec prise en charge du thème sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<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>Composants associés
RetroReservationCards
Un ensemble réactif de cartes de réservation/réservation à thème rétro avec prise en charge du mode sombre, adapté aux systèmes de rendez-vous ou de réservation. Les caractéristiques comprennent des couleurs vintage discrètes et une esthétique subtile des années 80/90.
Composant Cartes en mode sombre
Un composant de cartes réactives conçu pour les sites Web d’entreprise/d’entreprise avec une interface utilisateur en mode sombre et une palette de couleurs en niveaux de gris, avec une complexité et une interactivité modérées.
Composant des cartes météo Bauhaus
Un composant simple et réactif des cartes météo/climat inspiré des principes de conception du Bauhaus, avec des formes géométriques et une palette de couleurs triadique. Inclut la prise en charge du mode sombre.