Componente Glassmorphism Cards
Componente Glassmorphism Cards con colori vivaci. Design reattivo con supporto per temi scuri. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.
Codice 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>Componenti correlati
Luxury_Sepia_SaaS_Cards_Component
Un componente di schede complesso e reattivo con uno stile di design lussuoso/premium, combinazione di colori seppia/marrone, ottimizzato per applicazioni tecnologiche/SaaS, incluso il supporto della modalità oscura ed elementi interattivi.
Carta e-commerce
Componente reattivo della scheda di e-commerce con supporto della modalità oscura utilizzando i principi di Tailwind CSS e Material Design. Presenta una combinazione di colori vivaci con complessità moderata, inclusi elementi interattivi come pulsanti ed effetti al passaggio del mouse. Utilizza il layout basato su griglia e incorpora le ombre per la profondità.
Retro_E_commerce_Cards_Component
Un componente reattivo della scheda prodotto dell'e-commerce con un'estetica retrò/vintage, toni della terra e supporto per la modalità scura, adatto per esperienze di acquisto online. Le funzionalità includono l'immagine del prodotto, il nome, il prezzo e un pulsante di invito all'azione.