Componente Schede prodotto
Un componente di schede prodotto complesso e reattivo per piattaforme di intrattenimento/multimediali, caratterizzato da un design organico/ispirato alla natura che utilizza una tavolozza foresta/verde. Include il supporto per la modalità oscura ed elementi interattivi.
Codice HTML
<div class="bg-gradient-to-br from-emerald-50 to-green-100 py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-gray-950">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-extrabold text-green-900 text-center mb-12 dark:text-green-200">
Explore Our Worlds
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
<div class="relative pb-56 sm:pb-64 lg:pb-72">
<img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/237/800/600" alt="Image of a lush forest">
<div class="absolute inset-0 bg-gradient-to-t from-green-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
<div class="absolute bottom-0 left-0 p-6">
<span class="px-3 py-1 bg-green-600 text-white text-xs font-semibold rounded-full dark:bg-green-700">Fantasy</span>
</div>
</div>
<div class="p-6 relative">
<h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">Whispers of Eldoria</h3>
<p class="text-green-700 text-sm mb-4 dark:text-green-300">A captivating tale of ancient magic and forgotten kingdoms. Dive into a world where every creature has a story.</p>
<div class="flex items-center mb-4">
<div class="flex -space-x-2 mr-2">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author 1">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Author 2">
</div>
<span class="text-green-600 text-sm dark:text-green-400">Feat. Alex & Sarah</span>
</div>
<div class="flex justify-between items-center mb-4">
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
<span class="text-sm">2h 15m</span>
</div>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-sm font-semibold">4.8</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
<svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Start Watching
</button>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
<div class="relative pb-56 sm:pb-64 lg:pb-72">
<img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/1025/800/600" alt="Image of abstract bioluminescent mushrooms">
<div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
<div class="absolute bottom-0 left-0 p-6">
<span class="px-3 py-1 bg-emerald-600 text-white text-xs font-semibold rounded-full dark:bg-emerald-700">Sci-Fi</span>
</div>
</div>
<div class="p-6 relative">
<h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">Echoes of the Cosmos</h3>
<p class="text-green-700 text-sm mb-4 dark:text-green-300">Journey beyond the stars to uncover the secrets of a dying galaxy. A thrilling space opera unfolds.</p>
<div class="flex items-center mb-4">
<div class="flex -space-x-2 mr-2">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author 3">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Author 4">
</div>
<span class="text-green-600 text-sm dark:text-green-400">Created by Luna & Kai</span>
</div>
<div class="flex justify-between items-center mb-4">
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
<span class="text-sm">2h 45m</span>
</div>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-sm font-semibold">4.9</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
<svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Start Watching
</button>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
<div class="relative pb-56 sm:pb-64 lg:pb-72">
<img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/196/800/600" alt="Image of a serene waterfall">
<div class="absolute inset-0 bg-gradient-to-t from-lime-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
<div class="absolute bottom-0 left-0 p-6">
<span class="px-3 py-1 bg-lime-600 text-white text-xs font-semibold rounded-full dark:bg-lime-700">Adventure</span>
</div>
</div>
<div class="p-6 relative">
<h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">The Emerald Quest</h3>
<p class="text-green-700 text-sm mb-4 dark:text-green-300">Embark on a perilous journey through mystical lands to find the legendary Emerald Heart.</p>
<div class="flex items-center mb-4">
<div class="flex -space-x-2 mr-2">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Author 5">
<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Author 6">
</div>
<span class="text-green-600 text-sm dark:text-green-400">By The Wilderness Collective</span>
</div>
<div class="flex justify-between items-center mb-4">
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
<span class="text-sm">3h 05m</span>
</div>
<div class="flex items-center text-green-700 dark:text-green-300">
<svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-sm font-semibold">4.7</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
<svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Start Watching
</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Schede prodotto neumorfico - Tavolozza retrò
Un componente complesso e reattivo delle schede prodotto progettato con uno stile morbido dell'interfaccia utente neumorfica, utilizzando una tavolozza di colori retrò/vintage tenui. Le caratteristiche includono il supporto della modalità scura, ombre sottili per l'effetto di estrusione e HTML semantico per l'accessibilità. Adatto per la lettura e il consumo di contenuti, come un blog o la visualizzazione di contenuti.
Scheda Prodotto Skeuomorphic
Un componente della scheda prodotto scheumorfico per un dashboard, con stile in scala di grigi, complessità media, reattivo con modalità scura.
Componente Schede prodotto
Un semplice componente reattivo della scheda prodotto con microinterazioni, progettato per le interfacce dei social media che utilizzano Tailwind CSS, che supporta il tema scuro e la combinazione di colori in scala di grigi.