CCHub Logo CCHub Tailwind Collection
Komponenten Tabulatoren Tabs-Komponente

Tabs-Komponente

Eine responsive Tabs-Komponente, die für Social-Media-Schnittstellen entwickelt wurde, mit Mikrointeraktionen und einem dunklen Thema. Die Komponente enthält mehrere interaktive Elemente und verwendet Tailwind CSS.

Vorschau

HTML-Code 

<div class="bg-gray-900 dark:bg-gray-800 p-4 rounded-lg">
    <div class="flex space-x-4 border-b border-gray-700">
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600" aria-selected="true">Tab 1</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 2</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 3</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 4</button>
    </div>
    <div class="mt-4">
        <div class="tab-content py-6 px-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-md">
            <h2 class="text-lg font-semibold text-white">Tab 1 Content</h2>
            <p class="text-gray-300 dark:text-gray-200">This is the content for Tab 1. It could include various elements like images, text, and interactive features.</p>
            <div class="mt-4">
                <img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded mb-2">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                    <span class="text-gray-200 dark:text-gray-300">User Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Neumorphic Tabs"

Eine neumorphe Tabs-Komponente in Graustufen für Blog-Inhalte mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Skeuomorphe Tabs-Komponente

Eine responsive Tabs-Komponente, die mit Skeuomorphismus gestaltet ist und Tailwind CSS verwendet, um reale Designelemente nachzuahmen. Es enthält Unterstützung für dunkle Themen und Platzhalterbilder.

Offen

Art Deco News Tabs Komponente

Eine komplexe, reaktionsschnelle und luxuriöse Tab-Komponente im Art-Déco-Stil, die für Nachrichten- und Journalismus-Websites entwickelt wurde, mit geometrischen Mustern, satten analogen Farben und Unterstützung des Dunkelmodus. Es bietet mehrere interaktive Elemente für die Inhaltsnavigation.

Offen