Komponenten Kennzeichen Skeuomorphe Abzeichen

Skeuomorphe Abzeichen

Eine Skeuomorphic Badges-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code

<span class="inline-flex items-center rounded-md bg-gray-200 px-2.5 py-0.5 text-sm font-medium text-gray-800 shadow-md dark:bg-gray-700 dark:text-gray-200">
  Badge
</span>

<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 shadow-inner dark:bg-red-900 dark:text-red-200">
  Badge
</span>

<span class="inline-flex items-center rounded-md bg-blue-50 px-3 py-1 text-base font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900 dark:text-blue-200 dark:ring-blue-200/10">
  Badge
</span>

<span class="inline-flex items-center px-3 py-0.5 rounded-full bg-green-100 text-sm font-medium text-green-800 shadow-lg dark:bg-green-800 dark:text-green-100">
  <svg class="-ml-1 mr-1.5 h-2 w-2 text-green-400 dark:text-green-600" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Badge with dot
</span>

Verwandte Komponenten

Retro-Abzeichen

Retro/Vintage Badges Komponente für Business-/Unternehmenswebsites mit komplementärem Farbschema. Einfaches Layout, responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript.

Offen

Glassmorphism_Grayscale_Badges_Component

Eine einfache, reaktionsschnelle Badges-Komponente im Glassmorphism-Stil mit einem Graustufen-Farbschema, geeignet für Geschäfts-/Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus.

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