CCHub Logo CCHub Tailwind Collection
Komponenten Tabulatoren Tabs-Komponente

Tabs-Komponente

Eine minimalistische und lebendige Tabs-Komponente für den E-Commerce mit moderater Komplexität, responsivem Design und Unterstützung für dunkle Themen, implementiert mit Tailwind CSS und HTML.

Vorschau

HTML-Code 

<div class="w-full max-w-md mx-auto">
  <div class="flex border-b border-gray-200 dark:border-gray-700">
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Description
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none border-b-2 border-blue-600 dark:border-blue-400">
      Reviews
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Shipping
    </button>
  </div>
  <div class="mt-8">
    <!-- Content goes here based on the active tab -->
    <div class="text-gray-700 dark:text-gray-300">
      <!-- Reviews Content (Example) -->
      <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
      <div class="space-y-6">
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
            <p class="mt-2">This product is amazing! I highly recommend it.</p>
          </div>
        </div>
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">4 days ago</p>
            <p class="mt-2">Great quality and fast shipping.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Manufacturing_Industrial_Grayscale_Paper_Tabs

Eine einfache, reaktionsschnelle Tabulator-Komponente mit einem von Papier/Druck inspirierten Design und Graustufen-Farbschema, geeignet für Fertigungs- und Industrieanwendungen. Inklusive Unterstützung für den Dunkelmodus.

Offen

Komponente auf Registerkarten "Materialdesign"

Eine komplexe, monochrome, von Material Design inspirierte Registerkartenkomponente für Dashboards mit responsivem Design, Unterstützung für den Dunkelmodus und interaktiven Elementen. Verwendet rasterbasierte Layouts und subtile Schatteneffekte.

Offen

MaterialDesignRegisterkarten

Eine responsive Tabs-Komponente, die den Material Design-Prinzipien mit Tailwind CSS folgt, einschließlich Unterstützung des Dunkelmodus und responsiver Effekte.

Offen