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
Composant Tabs skeuomorphic
Un composant d’onglets réactifs stylisé avec un skeuomorphisme, utilisant Tailwind CSS pour imiter les éléments de conception du monde réel. Il inclut la prise en charge du thème sombre et des images de remplacement.
Composant Onglets
Un composant d’onglets réactifs conçu pour les interfaces de médias sociaux, avec des micro-interactions et un thème sombre. Le composant comprend plusieurs éléments interactifs et utilise Tailwind CSS.
GlassyNiveaux de GrisOnglets
Glassmorphism Grayscale Simple Dashboard Tabs Component avec prise en charge du mode sombre