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 responsive Badges-Komponente mit 3D-Design und Unterstützung für Tiefe und dunkle Themen. Jedes Badge stellt einen Benutzer mit einem Namen, einem Bild und einer Beschreibung dar, die mit Tailwind CSS erstellt wurden.

Offen

Skeuomorphe Abzeichen

Eine Reihe von Abzeichen mit einem skeuomorphen Design, einem komplementären Farbschema und einem einfachen Layout, geeignet für einen Blog oder eine Content-Site. Reaktionsschnell mit Unterstützung für den Dunkelmodus.

Offen

Badges-Komponente

Eine reaktionsschnelle Badges-Komponente, die im Glassmorphism-Stil entwickelt wurde, mit mattglasähnlichen, durchscheinenden Elementen und Unschärfeeffekten und Unterstützung für den Dunkelmodus.

Offen