Composante des composantes interactives
Composant de composants interactifs avec conception 3D, palette de couleurs monochromatique et complexité modérée pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">Featured Products</h2>
<p class="mt-4 text-lg leading-6 text-gray-600 dark:text-gray-300">Explore our selection of high-quality products.</p>
</div>
<div class="mt-10 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
<div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
<div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img src="https://picsum.photos/id/237/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Product Name</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Product description goes here.</p>
<div class="mt-3 flex items-center justify-between">
<p class="text-lg font-medium text-gray-900 dark:text-white">$19.99</p>
<button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Repeat product block for more products -->
<div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
<div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img src="https://picsum.photos/id/238/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Another Product</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Another product description.</p>
<div class="mt-3 flex items-center justify-between">
<p class="text-lg font-medium text-gray-900 dark:text-white">$29.99</p>
<button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<div class="group relative bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform perspective-1000 hover:rotate-y-6 transition duration-500">
<div class="w-full min-h-80 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img src="https://picsum.photos/id/239/300/300" alt="Product Image" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
</div>
<div class="p-4">
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Third Product</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Yet another product description.</p>
<div class="mt-3 flex items-center justify-between">
<p class="text-lg font-medium text-gray-900 dark:text-white">$39.99</p>
<button class="bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composante des composantes interactives
Un composant interactif pour les médias sociaux conçu avec un mode sombre et une palette de couleurs monochromatiques.
ArtDeco_JobCard
Un composant de carte de travail simple et réactif avec une esthétique Art déco, des couleurs rétro sourdes et une prise en charge du mode sombre, adapté aux sites d’emploi ou aux plateformes de carrière.
BrutalismePortfolioInteractif
Composant de composants interactifs avec un design brutaliste, des couleurs vives et une mise en page complexe à des fins de portefeuille, réactif avec prise en charge du thème sombre.