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

Tabs-Komponente

Eine responsive Tabs-Komponente, die für den Dunkelmodus mit Tailwind CSS entwickelt wurde. Es verfügt über verschiedene Registerkarten, auf die Benutzer klicken können, um Inhalte anzuzeigen, sowie Platzhalterbilder und Avatare.

Offen

Tabs-Komponente

Eine reaktionsschnelle Tabs-Komponente mit Material Design-Stil, monochromatischem Farbschema und Unterstützung für dunkle Themen, die mit Tailwind CSS für inhaltsintensive Websites erstellt wurde.

Offen

Tabs-Komponente

Responsive Tabs Component mit Erdtönen und Microinteractions for Business-Websites, die den Dunkelmodus mit Tailwind CSS unterstützen. Verwendet nur HTML- und Tailwind-Klassen.

Offen