CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Pastellfarbene Abzeichen Benutzeroberfläche im Dunkelmodus

Pastellfarbene Abzeichen Benutzeroberfläche im Dunkelmodus

Eine einfache, reaktionsschnelle Badges-Komponente für Unternehmenswebsites mit einer Benutzeroberfläche im Dunkelmodus mit Pastellfarben. Es wurde mit Tailwind CSS entwickelt, verwendet einen dunklen Hintergrund, um die Belastung der Augen zu reduzieren, und unterstützt ein responsives Layout.

Vorschau

HTML-Code 

<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
    Business
  </span>
  <span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
    Corporate
  </span>
  <span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
    Innovation
  </span>
  <span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
    Strategy
  </span>
  <span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
    Growth
  </span>
</div>

Verwandte Komponenten

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.

Offen

Neumorphismus-Abzeichen

Hierbei handelt es sich um eine Badges-Komponente im Neumorphism-Stil mit einem Pastell-Farbschema, die für ein Portfolio entwickelt wurde und Tailwind CSS verwendet.

Offen

Badges-Komponente

Eine einfache und reaktionsschnelle Badges-Komponente, die mit einer 3D-Ästhetik und einem komplementären Farbschema für den Konsum von Blogs und Inhalten entwickelt wurde. Unterstützt den Dunkelmodus.

Offen