Composant Onglets
Un composant d’onglets réactifs conçu pour le mode sombre à l’aide de Tailwind CSS. Il comporte différents onglets sur lesquels les utilisateurs peuvent cliquer pour révéler du contenu, ainsi que des images et des avatars de remplacement.
HTML Code
<div class="bg-gray-800 text-white rounded-lg shadow-md">
<div class="flex border-b border-gray-700">
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab1')">Tab 1</button>
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab2')">Tab 2</button>
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab3')">Tab 3</button>
</div>
<div id="tab1" class="p-4">
<h2 class="text-lg font-semibold">Tab 1 Content</h2>
<p>Content for tab 1 goes here.</p>
<img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>John Doe</span>
</div>
</div>
<div id="tab2" class="hidden p-4">
<h2 class="text-lg font-semibold">Tab 2 Content</h2>
<p>Content for tab 2 goes here.</p>
<img src="https://picsum.photos/400/200?random=2" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Jane Doe</span>
</div>
</div>
<div id="tab3" class="hidden p-4">
<h2 class="text-lg font-semibold">Tab 3 Content</h2>
<p>Content for tab 3 goes here.</p>
<img src="https://picsum.photos/400/200?random=3" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Mike Smith</span>
</div>
</div>
</div>Composants associés
MaterialDesignTabs
Un composant d’onglets réactifs suivant les principes de Material Design avec Tailwind CSS, y compris la prise en charge du mode sombre et les effets réactifs.
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
Un composant d’onglets réactifs avec des micro-interactions pour les sites Web d’entreprise, avec des couleurs complémentaires et la prise en charge du mode sombre.