Composant de nuage de balises
Un composant de nuage de balises réactif avec des styles de conception matérielle, une palette de couleurs complémentaire et une complexité modérée à des fins de commerce électronique, avec prise en charge du thème sombre.
HTML Code
<div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-md max-w-4xl mx-auto">
<h2 class="text-2xl font-semibold mb-4 dark:text-white text-gray-800">Popular Tags</h2>
<div class="flex flex-wrap gap-3">
<!-- Tag Item 1 -->
<a href="#" class="dark:bg-purple-700 dark:text-purple-100 bg-indigo-500 text-indigo-50 px-4 py-2 rounded-full hover:bg-indigo-600 dark:hover:bg-purple-800 transition duration-300 shadow-md text-sm">
Electronics
</a>
<!-- Tag Item 2 -->
<a href="#" class="dark:bg-teal-700 dark:text-teal-100 bg-green-500 text-green-50 px-4 py-2 rounded-full hover:bg-green-600 dark:hover:bg-teal-800 transition duration-300 shadow-md text-sm">
Apparel
</a>
<!-- Tag Item 3 -->
<a href="#" class="dark:bg-orange-700 dark:text-orange-100 bg-red-500 text-red-50 px-4 py-2 rounded-full hover:bg-red-600 dark:hover:bg-orange-800 transition duration-300 shadow-md text-sm">
Home Goods
</a>
<!-- Tag Item 4 -->
<a href="#" class="dark:bg-blue-700 dark:text-blue-100 bg-blue-500 text-blue-50 px-4 py-2 rounded-full hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 shadow-md text-sm">
Books
</a>
<!-- Tag Item 5 -->
<a href="#" class="dark:bg-red-700 dark:text-red-100 bg-pink-500 text-pink-50 px-4 py-2 rounded-full hover:bg-pink-600 dark:hover:bg-red-800 transition duration-300 shadow-md text-sm">
Sporting Goods
</a>
<!-- Tag Item 6 -->
<a href="#" class="dark:bg-lime-700 dark:text-lime-100 bg-yellow-500 text-yellow-50 px-4 py-2 rounded-full hover:bg-yellow-600 dark:hover:bg-lime-800 transition duration-300 shadow-md text-sm">
Outdoors
</a>
<!-- Tag Item 7 -->
<a href="#" class="dark:bg-cyan-700 dark:text-cyan-100 bg-teal-500 text-teal-50 px-4 py-2 rounded-full hover:bg-teal-600 dark:hover:bg-cyan-800 transition duration-300 shadow-md text-sm">
Kitchen
</a>
<!-- Tag Item 8 -->
<a href="#" class="dark:bg-fuchsia-700 dark:text-fuchsia-100 bg-purple-500 text-purple-50 px-4 py-2 rounded-full hover:bg-purple-600 dark:hover:bg-fuchsia-800 transition duration-300 shadow-md text-sm">
Toys
</a>
<!-- Tag Item 9 -->
<a href="#" class="dark:bg-emerald-700 dark:text-emerald-100 bg-green-600 text-green-50 px-4 py-2 rounded-full hover:bg-green-700 dark:hover:bg-emerald-800 transition duration-300 shadow-md text-sm">
Gaming
</a>
<!-- Tag Item 10 -->
<a href="#" class="dark:bg-rose-700 dark:text-rose-100 bg-red-600 text-red-50 px-4 py-2 rounded-full hover:bg-red-700 dark:hover:bg-rose-800 transition duration-300 shadow-md text-sm">
Automotive
</a>
</div>
</div>
Composants associés
Composant de nuage de balises rétro
Un composant de nuage de balises réactif utilisant Tailwind CSS, avec une esthétique de design rétro/vintage, une palette de couleurs pastel et une complexité simple. Convient à un portefeuille, y compris la prise en charge du mode sombre.
Composant de nuage de balises
Un composant de nuage de balises avec un style de conception Neumorphism, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de nuage de balises
Un composant de nuage de balises réactif avec des animations attrayantes, utilisant un schéma de couleurs monochromatiques adapté à un portfolio.