CCHub Logo CCHub Tailwind Collection
Komponenten Kennzeichen Badges-Komponente

Badges-Komponente

Eine responsive Badges-Komponente mit Skeuomorphismus-Stil, triadischem Farbschema und einfacher Komplexität, die für Portfolios mit Unterstützung dunkler Themen entwickelt wurde.

Vorschau

HTML-Code 

<div class="p-4 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-xl shadow-xl max-w-sm mx-auto">
  <div class="text-center">
    <img class="w-24 h-24 rounded-full mx-auto border-4 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mt-4">John Doe</h2>
    <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
  </div>
  <div class="flex justify-center mt-6 space-x-3">
    <span class="inline-block bg-teal-500 text-white text-xs px-3 py-1 rounded-full shadow-md">HTML</span>
    <span class="inline-block bg-fuchsia-500 text-white text-xs px-3 py-1 rounded-full shadow-md">CSS</span>
    <span class="inline-block bg-amber-500 text-white text-xs px-3 py-1 rounded-full shadow-md">Tailwind CSS</span>
  </div>
  <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Showcasing skills and expertise.</p>
  </div>
</div>

Verwandte Komponenten

Badges-Komponente

Eine responsive Badges-Komponente mit ansprechenden Mikrointeraktionen, die mit Tailwind CSS entworfen wurde. Unterstützt den Dunkelmodus und enthält Bildplatzhalter.

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 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