CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Neumorphismus Funktionale Komponente

Neumorphismus Funktionale Komponente

Eine Webkomponente nach dem Neumorphism-Designstil, die mit Tailwind CSS erstellt wurde. Es unterstützt Responsive Design und Dark Mode rein über CSS.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar" class="w-24 h-24 rounded-full shadow-neumorphic-inset dark:shadow-neumorphic-dark-inset mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-6">Frontend Developer | Neumorphism Enthusiast</p>
      <div class="flex justify-around w-full">
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
          </svg>
        </button>
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-6 6"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 7px 7px 15px #a7a7a7,
               -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-inset {
    box-shadow: inset 7px 7px 15px #a7a7a7,
                inset -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-press {
    box-shadow: inset 5px 5px 10px #a7a7a7,
                inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563,
               -7px -7px 15px #374151;
  }
  .dark .shadow-neumorphic-dark-inset {
    box-shadow: inset 7px 7px 15px #4b5563,
                inset -7px -7px 15px #374151;
  }
    .dark .shadow-neumorphic-dark-press {
    box-shadow: inset 5px 5px 10px #4b5563,
                inset -5px -5px 10px #374151;
  }
</style>

Verwandte Komponenten

Komponente "Funktionale Komponenten"

Eine Webkomponente, die reale Gegenstücke im Business-Corporate-Stil mit einem komplementären Farbschema, einem einfachen Layout und einem responsiven Design mit Unterstützung des Dunkelmodus nachahmt.

Offen

Dashboard für funktionale Komponenten

Eine reaktionsschnelle Dashboard-Komponente, die nach den Prinzipien des Material Designs und einem monochromatischen Farbschema entwickelt wurde. Es bietet rasterbasierte Layouts, interaktive Elemente und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Funktionale Komponenten Komponente - Brutalismus Stil

Eine funktionale Webkomponente, die in einem brutalistischen Stil mit Tailwind CSS gestaltet wurde. Die Komponente zeichnet sich durch ein fettes Layout mit hohem Kontrast, reaktionsschnellen Effekten und Unterstützung für dunkle Designs aus. Es enthält Platzhalterbilder und Avatare für eine visuelle Attraktivität.

Offen