Composants Nuage de balises Composant Nuage de balises (mode sombre, pastel)

Composant Nuage de balises (mode sombre, pastel)

Un composant de nuage de balises réactif avec prise en charge du mode sombre, utilisant des couleurs pastel. Convient pour un portefeuille.

Aperçu

HTML Code

<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center mb-8 dark:text-purple-200">Skills & Interests</h2>
    <div class="flex flex-wrap justify-center gap-4">
      <span class="bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition duration-300">
        Web Development
      </span>
      <span class="bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-pink-300 dark:hover:bg-pink-600 transition duration-300">
        UI/UX Design
      </span>
      <span class="bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-blue-300 dark:hover:bg-blue-600 transition duration-300">
        Data Science
      </span>
      <span class="bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-green-300 dark:hover:bg-green-600 transition duration-300">
        Machine Learning
      </span>
      <span class="bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-yellow-300 dark:hover:bg-yellow-600 transition duration-300">
        Photography
      </span>
      <span class="bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-indigo-300 dark:hover:bg-indigo-600 transition duration-300">
        Gardening
      </span>
      <span class="bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-red-300 dark:hover:bg-red-600 transition duration-300">
        Travel
      </span>
      <span class="bg-teal-200 text-teal-800 dark:bg-teal-700 dark:text-teal-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-teal-300 dark:hover:bg-teal-600 transition duration-300">
        Cooking
      </span>
      <span class="bg-orange-200 text-orange-800 dark:bg-orange-700 dark:text-orange-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-orange-300 dark:hover:bg-orange-600 transition duration-300">
        Reading
      </span>
    </div>
  </div>
</div>

Composants associés

Glassmorphism Tag Cloud Component

Un composant de nuage d’étiquettes de style glassmorphism avec une palette de couleurs violette/violette, adapté aux portfolios. Comprend des éléments translucides givrés, un design réactif et une prise en charge du mode sombre.

Ouvrir

Composant de nuage de balises

Un composant Tag Cloud réactif conçu pour les interfaces de médias sociaux avec une interface utilisateur en mode sombre et une palette de couleurs pastel.

Ouvrir

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.

Ouvrir