Composant Onglets en mode sombre
Un composant d’onglets réactifs conçu pour le mode sombre, utilisant Tailwind CSS.
HTML Code
<div class="bg-gray-900 text-white rounded-lg p-4">
<div class="flex space-x-2">
<button class="tab-button active bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 1</button>
<button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 2</button>
<button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 3</button>
</div>
<div class="tab-content mt-4">
<div class="content active">
<h2 class="text-lg font-semibold">Content for Tab 1</h2>
<img src="https://picsum.photos/400/200?random=1" alt="Random placeholder" class="mt-2 rounded-lg">
<p class="mt-2">This is the content for the first tab. Here you can add more information, images, etc.</p>
</div>
<div class="content hidden">
<h2 class="text-lg font-semibold">Content for Tab 2</h2>
<img src="https://picsum.photos/400/200?random=2" alt="Random placeholder" class="mt-2 rounded-lg">
<p class="mt-2">This is the content for the second tab. More details can be added here.</p>
</div>
<div class="content hidden">
<h2 class="text-lg font-semibold">Content for Tab 3</h2>
<img src="https://picsum.photos/400/200?random=3" alt="Random placeholder" class="mt-2 rounded-lg">
<p class="mt-2">Here is the content for the third tab, where additional insights can be included.</p>
</div>
</div>
</div>
<style>
.tab-button.active {
background-color: #1f2937;
border: 1px solid #4b5563;
}
.tab-button:hover {
background-color: #374151;
}
.content.hidden {
display: none;
}
.content.active {
display: block;
}
</style>Composants associés
ArtDecoTabsComponent
Un composant d’onglets complexe et réactif à l’esthétique Art déco, conçu pour les portfolios de photographie, avec des tons bleus d’entreprise et une prise en charge du mode sombre.
Composant Onglets
Un composant d’onglets réactif avec un design skeuomorphe, une palette de couleurs analogue et une prise en charge du thème sombre, adapté aux sites Web d’entreprise professionnels. Le composant utilise Tailwind CSS pour le style et n’inclut aucun code JavaScript.
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.