Composant de conteneur
Un composant de conteneur conçu dans un style brutaliste pour le commerce électronique, avec une mise en page réactive avec prise en charge du thème sombre, utilisant Tailwind CSS.
HTML Code
<div class="flex flex-col bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
<header class="text-white text-2xl font-bold mb-4">E-commerce Store</header>
<div class="flex flex-wrap gap-4">
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/300" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 1</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/301" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 2</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex flex-col bg-gray-700 p-4 rounded-md dark:bg-gray-800 w-full md:w-1/3">
<img src="https://picsum.photos/200/302" alt="Product Image" class="mb-2 rounded-md">
<h2 class="text-lg font-bold text-yellow-300">Product Title 3</h2>
<p class="text-white">This is a brief description of the product. It's bold and raw.</p>
<button class="mt-2 bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<footer class="text-center mt-4 text-gray-400">
<p>© 2023 E-commerce Store</p>
</footer>
</div>Composants associés
Composant de conteneur 21
Un composant de conteneur réactif de style rétro/vintage avec prise en charge du thème sombre.
Conteneur de médias sociaux
Un composant de conteneur réactif avec des couleurs vives, des micro-interactions attrayantes et une prise en charge du thème sombre, adapté aux interfaces de médias sociaux. Les caractéristiques comprennent des effets de survol subtils et une mise en page propre.
Playful_Blog_Container
Un conteneur de contenu de blog ludique et joyeux avec des éléments arrondis et des couleurs semblables à des bonbons, conçu pour la lecture et la consommation de contenu. Il est entièrement réactif et prend en charge le mode sombre.