Composant Glassmorphism Tabs
Un composant d’onglets réactifs avec le style glassmorphism, conçu pour les interfaces de médias sociaux. Il présente un effet de verre dépoli utilisant Tailwind CSS avec une palette de couleurs en niveaux de gris. La conception prend en charge le mode sombre.
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>Composants associés
Manufacturing_Industrial_Grayscale_Paper_Tabs
Un composant d’onglets simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs en niveaux de gris, adapté aux applications industrielles et de fabrication. Inclut la prise en charge du mode sombre.
Composant Onglets en mode sombre
Un composant d’onglets réactifs conçu pour le mode sombre, utilisant Tailwind CSS.
Composant Onglets de conception matérielle
Il s’agit d’un composant d’onglets complexe et monochrome inspiré du Material Design pour les tableaux de bord, avec un design réactif, une prise en charge du mode sombre et des éléments interactifs. Utilise des mises en page basées sur une grille et des effets d’ombre subtils.