CCHub Logo CCHub Tailwind Collection
Komponenten Fortschrittsbalken Fortschrittsbalken für Neumorphismus

Fortschrittsbalken für Neumorphismus

Ein Fortschrittsbalken im Neumorphism-Stil für Portfolios mit pastellfarbenem Farbschema, mäßiger Komplexität, Reaktionsfähigkeit und Unterstützung für dunkle Themen. Es ist kein JavaScript enthalten; Die Komponente wird mit HTML und Tailwind CSS erstellt.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
    <div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
  </div>
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Skill Progress
  </div>
</div>

<style>
.shadow-inner {
  box-shadow: inset 5px 5px 10px #b0b0b0,
              inset -5px -5px 10px #f0f0f0;
}

.dark .shadow-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a,
              inset -5px -5px 10px #363636;
}

.shadow-neumo-progress {
  box-shadow: 5px 5px 10px #a78bfa,
              -5px -5px 10px #c084fc;
}

.dark .shadow-neumo-progress-dark {
  box-shadow: 5px 5px 10px #6d28d9,
              -5px -5px 10px #7c3aed;
}
</style>

Verwandte Komponenten

Skeuomorpher Fortschrittsbalken

Skeuomorphe Fortschrittsbalkenkomponente für Portfolios mit monochromatischem Farbschema und komplexem, interaktivem Design mit Unterstützung für Responsive- und Dark-Modus unter Verwendung von Tailwind CSS.

Offen

Cyberpunk Neo-Retro Fortschrittsbalken

Eine Fortschrittsbalkenkomponente mittlerer Komplexität mit Cyberpunk, Neo-Retro-Ästhetik, dunklem Hintergrund und gedämpften Vintage-Akzentfarben, die für Unterhaltungs-/Medienplattformen entwickelt wurde. Es verfügt über eine segmentierte Fortschrittsanzeige und ist vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen

Fortschrittsbalken für den Dunkelmodus

Eine reaktionsschnelle Fortschrittsleisten-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde, mit einem schlanken Design und Unterstützung für dunkle Themen.

Offen