CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Neumorphismus-Abzeichen

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.

Vorschau

HTML-Code 

<div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    HTML
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    CSS
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    Tailwind CSS
  </span>
  nocode
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>

Verwandte Komponenten

Badges-Komponente

Eine reaktionsschnelle Badges-Komponente, die in einem 3D-Stil mit Erdtönen entworfen wurde und interaktive Elemente enthält, die für ein Dashboard geeignet sind.

Offen

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

Badges-Komponente

Eine responsive Badges-Komponente mit Mikrointeraktionen und Unterstützung für dunkle Themen, die mit Tailwind CSS entwickelt wurde. Diese Komponente enthält Hover-Effekte und verwendet Platzhalterbilder für Avatare.

Offen