Componente Tarjetas de producto
Un componente de tarjetas de producto complejo y receptivo para plataformas de entretenimiento/medios, con un diseño orgánico/inspirado en la naturaleza que utiliza una paleta de colores bosque/verde. Incluye soporte para modo oscuro y elementos interactivos.
Código 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>Componentes relacionados
Componente de tarjetas de producto - Agricultura/Ganadería
Un componente de tarjeta de producto receptivo diseñado para sitios web de agricultura y ganadería, con tipografía limpia, sistemas de cuadrícula y colores otoñales. Incluye soporte para modo oscuro.
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con microinteracciones en tonos tierra, que proporciona soporte de tema oscuro para la exhibición de portafolios.
Componente Tarjetas de producto
Un componente de tarjetas de producto complejo y receptivo con un diseño corporativo/profesional que utiliza un esquema de color púrpura/violeta, adecuado para listados de productos de noticias o servicios profesionales. Incluye soporte para modo oscuro.