Componente Componenti interattivi
Componente interattivo con design a scheumorfismo, combinazione di colori analoga e complessità moderata per scopi di blog/contenuti. Design reattivo con supporto per temi scuri. Nessun codice JavaScript.
Codice HTML
<div class="bg-gray-200 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm mx-auto">
<div class="relative">
<img class="w-full h-48 object-cover rounded-md border-4 border-gray-300 dark:border-gray-700" src="https://picsum.photos/seed/skeuomorphism/400/300" alt="Article Image">
<div class="absolute bottom-0 right-0 bg-gradient-to-tl from-gray-400 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded-tl-lg">Skeuomorphism</div>
</div>
<div class="mt-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex justify-between items-center mt-4">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2 border-2 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
</div>
<button class="bg-gradient-to-br from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">Read More</button>
</div>
<div class="mt-4 flex justify-around text-gray-600 dark:text-gray-400 text-sm">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L10 6l-6.553-3.894A1 1 0 002 3v14a1 1 0 001 1h14a1 1 0 001-1V3z" clip-rule="evenodd" />
</svg>
<span>Save</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M15 8a3 3 0 10-2.977-2.455l-4.78 2.49a3 3 0 00-4.633.908l-1.5-.8A3 3 0 105 12v1a1 1 0 100 2v1a1 1 0 100 2h2a1 1 0 100-2h1a1 1 0 100-2h2a1 1 0 100-2h3a3 3 0 10-3-3zm-3.154 9A3 3 0 1016 13.802v-4.036l-.078.04A2.005 2.005 0 0115 9a2 2 0 11-1.923 2.554l-.078.04V17z" />
</svg>
<span>Share</span>
</div>
</div>
</div>Componenti correlati
Componente Componenti interattivi
Componente Componenti interattivi con design 3D, combinazione di colori monocromatica e complessità moderata per l'e-commerce, con design reattivo e supporto per temi scuri.
Scheda Prodotto Brutalista
Un semplice componente interattivo della scheda prodotto per l'e-commerce, con un design brutalista in scala di grigi. Presenta un'immagine del prodotto, un titolo, un prezzo e un pulsante "Aggiungi al carrello". Il componente è reattivo e supporta la modalità scura. Gli effetti al passaggio del mouse sono inclusi per l'interattività.
Componente Componenti interattivi
Un componente interattivo per i social media progettato con modalità oscura e combinazione di colori monocromatici.