Composant fonctionnel du commerce électronique
Composant de commerce électronique de conception plate minimaliste avec palette de couleurs triadique et prise en charge réactive du mode sombre.
HTML Code
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our E-commerce Store</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">A brief description of the product goes here.</p>
<div class="mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-white">$99.99</span>
<button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/301/200" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Find out more about this amazing product!</p>
<div class="mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-white">$149.99</span>
<button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/302/200" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Best Seller</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">This product is a customer favorite!</p>
<div class="mt-4">
<span class="text-xl font-bold text-gray-800 dark:text-white">$79.99</span>
<button class="mt-2 bg-blue-500 text-white rounded-lg px-4 py-2 hover:bg-blue-600 transition duration-200">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-xl font-bold text-gray-800 dark:text-white">Customer Reviews</h3>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="ml-4">
<p class="text-gray-800 dark:text-white">John Doe</p>
<p class="text-gray-600 dark:text-gray-300">"Excellent products! Fast shipping and great service. Highly recommend!"</p>
</div>
</div>
</div>
</div>Composants associés
Composants fonctionnels - Style brutalisme
Un composant web fonctionnel conçu dans un style brutaliste à l’aide de Tailwind CSS. Le composant présente une mise en page audacieuse avec un contraste élevé, des effets réactifs et la prise en charge des thèmes sombres. Il comprend des images de remplacement et des avatars pour un attrait visuel.
Composant de documentation Art Déco Violet
Il s’agit d’un composant de documentation/wiki de complexité modérée avec un thème de design Art déco, avec des motifs géométriques et un style luxueux utilisant un spectre de couleurs violet/violet. Entièrement réactif avec prise en charge du mode sombre.
Composants fonctionnels
Un composant de médias sociaux conçu avec le style Brutalism et les couleurs pastel, doté d’une interface complexe pour les interactions, avec prise en charge du mode sombre.