Komponenten Tabulatoren Glassmorphism Tabs-Komponente

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.

Vorschau

HTML-Code

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-800">
    <div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-lg shadow-lg p-5 w-full max-w-md">
        <h2 class="text-white text-2xl font-semibold mb-4 text-center">Social Media Tabs</h2>
        <div class="flex justify-around mb-4">
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab1">Tab 1</button>
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab2">Tab 2</button>
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab3">Tab 3</button>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div id="content-tab1" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 1 Content</h3>
                <p>Welcome to Tab 1! This is where content for the first tab goes.</p>
                <img src="https://picsum.photos/200?random=1" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 1</span>
                </div>
            </div>
            <div id="content-tab2" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 2 Content</h3>
                <p>Welcome to Tab 2! This is where content for the second tab goes.</p>
                <img src="https://picsum.photos/200?random=2" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 2</span>
                </div>
            </div>
            <div id="content-tab3" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 3 Content</h3>
                <p>Welcome to Tab 3! This is where content for the third tab goes.</p>
                <img src="https://picsum.photos/200?random=3" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 3</span>
                </div>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

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

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

Registerkarten für Materialdesign

Tabs-Komponente mit Material Design-Stil, responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS ohne JavaScript.

Offen