Disposition minimaliste de la grille bleu océan
Un composant de mise en page de grille minimaliste et réactif pour les marques de mode/beauté, avec des tons bleu océan et la prise en charge du mode sombre.
HTML Code
<div class="bg-sky-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-extrabold text-blue-900 dark:text-sky-300 text-center mb-12 sm:mb-16">
Explore Our Latest Collection
</h2>
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1018/400/500" alt="Elegant Blue Dress">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Ocean Whisper Dress</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Effortless elegance for every occasion.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$129.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1020/400/500" alt="Luxurious Silk Scarf">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Azure Silk Scarf</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Soft and flowing, a touch of luxury.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$49.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1039/400/500" alt="Deep Blue Handbag">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Marine Mini Bag</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Compact and chic, perfect for essentials.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$89.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/97/400/500" alt="Elegant Pearl Necklace">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Seashell Pearl Necklace</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Timeless beauty for a delicate touch.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$199.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1041/400/500" alt="Minimalist Silver Earrings">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coral Drop Earrings</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Subtle elegance for everyday wear.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$59.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1021/400/500" alt="Trendy Sunglasses Blue Frame">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Deep Sea Shades</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stylish protection for radiant eyes.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$79.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1042/400/500" alt="Soft Blue Knitwear">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coastal Knit Sweater</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Cozy comfort for colder days.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$95.00</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
<img class="w-full h-72 object-cover" src="https://picsum.photos/id/1025/400/500" alt="Minimalist Blue Sandals">
<div class="p-6">
<h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Lagoon Sandals</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Lightweight and stylish for summer walks.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$65.00</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Grille agricole ludique
Un composant de mise en page de grille simple, joyeux et réactif pour l’agriculture et les sites Web agricoles, avec des neutres chauds, des éléments arrondis et la prise en charge du mode sombre.
Disposition de la grille de jeu Art déco
Une grille de jeu réactive inspirée de l’Art déco avec des motifs géométriques, des couleurs en niveaux de gris et des éléments interactifs. Conçu pour les sites Web et les interfaces de jeux, avec prise en charge du mode sombre.
Composant de disposition de grille de neumorphisme
Composant de disposition de grille de neumorphisme