Componente Schede Glassmorphism
Un componente di schede reattive con stile glassmorphism, progettato per le interfacce dei social media. Presenta un effetto simile al vetro smerigliato utilizzando Tailwind CSS con una combinazione di colori in scala di grigi. Il design supporta la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente Art Deco News Tabs
Un componente complesso, reattivo e lussuoso in stile "Art Déco" progettato per siti Web di notizie e giornalismo, con motivi geometrici, colori analoghi ricchi e supporto per la modalità scura. Fornisce più elementi interattivi per la navigazione dei contenuti.
Componente Schede
Un componente di schede minimalista per siti Web di e-commerce con elementi interattivi, design reattivo e supporto per la modalità oscura.
Componente Schede
Un componente di schede reattive progettato per le interfacce dei social media, con microinterazioni e un tema scuro. Il componente include più elementi interattivi e utilizza Tailwind CSS.