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 reaktionsschnelle Badge-Komponente im Dark-Modus für den E-Commerce, die verschiedene Badges mit komplementären Farbschemata und interaktiven Elementen präsentiert.

Offen

Badges-Komponente

Eine Abzeichenkomponente im Neumorphism-Stil für Blogs mit analogem Farbschema und reichhaltiger Benutzeroberfläche.

Offen

Badges-Komponente - Erdtöne im Dunkelmodus

Ein komplexes Badges-Komponentensystem, das mit Erdtönen für eine Blog-/Content-Schnittstelle im Dark-Modus entwickelt wurde. Die Komponente enthält verschiedene Badge-Typen für Artikelkategorien, Benutzerstatus, Inhalts-Tags, Benachrichtigungen und Erfolgsindikatoren. Alle in natürlichen Erdtönen mit Unterstützung für den Dunkelmodus. Das Design ist vollständig responsiv und passt sich verschiedenen Bildschirmgrößen an.

Offen