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

Glassmorphism Tabs-Komponente

Eine responsive Tabs-Komponente im Glassmorphism-Stil, die für Social-Media-Schnittstellen entwickelt wurde. Es verfügt über einen Milchglas-ähnlichen Effekt unter Verwendung von Tailwind CSS mit einem Graustufen-Farbschema. Das Design unterstützt den Dunkelmodus.

Offen

Tabs-Komponente

Eine responsive Tabs-Komponente, die in einem skeuomorphen Stil für eine E-Commerce-Anwendung entworfen wurde, unter Verwendung eines pastellfarbenen Farbschemas und Tailwind CSS.

Offen

Tabs-Komponente

Eine Tabs-Komponente im brutalistischen Stil für soziale Medien mit Komplementärfarben und einem komplexen, responsiven Design, einschließlich Unterstützung für dunkle Themen.

Offen