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 de soins de santé vibrante inspirée du papier
Un composant de mise en page de grille simple, inspiré du papier/de l’impression avec des couleurs vives, conçu pour les applications médicales/de santé. Il est entièrement réactif, inclut la prise en charge du mode sombre et utilise le HTML sémantique.
Composant de disposition de grille 29
Un composant de mise en page de grille réactif conçu dans un style brutaliste avec un contraste élevé et des mises en page inhabituelles, prenant en charge le mode sombre avec Tailwind CSS.
Monospace/Developer - Composant de disposition de grille musicale/audio
Un composant de mise en page de grille simple et réactif pour les plates-formes musicales/audio, conçu avec une esthétique monospace/développeur utilisant des neutres chauds. Inclut la prise en charge du mode sombre.