CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Badges-Komponente

Badges-Komponente

Eine einfache, reaktionsschnelle Badges-Komponente mit Unterstützung für den Dunkelmodus, die ein triadisches Farbschema verwendet, das für ein Portfolio geeignet ist.

Vorschau

HTML-Code 

<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
    <div class="flex flex-wrap gap-2">
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Microinteractions Badges"

Eine komplexe, reaktionsschnelle Badges-Komponente mit Pastellfarben, die für Beratung/Dienstleistungen entwickelt wurde, mit Hover-Mikrointeraktionen und Unterstützung für den Dunkelmodus. Jedes Abzeichen wird beim Bewegen des Mauszeigers leicht erweitert, um mehr Kontext anzuzeigen.

Offen

Badges-Komponente

Eine Komponente für Abzeichen im Retro-Design mit einem Graustufen-Farbschema, die für einen Blog oder eine Content-Site geeignet ist. Es verfügt über mehrere interaktive Elemente und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Das Design vermeidet JavaScript und verlässt sich ausschließlich auf HTML und Tailwind CSS.

Offen

Abzeichen Komponente 48

Eine Badges-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde und responsive Layouts und Unterstützung für dunkle Designs mit Tailwind CSS bietet.

Offen