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.
HTML Code
<div class="bg-gray-900 dark:bg-gray-800 p-4 rounded-lg">
<div class="flex space-x-4 border-b border-gray-700">
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600" aria-selected="true">Tab 1</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 2</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 3</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 4</button>
</div>
<div class="mt-4">
<div class="tab-content py-6 px-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-white">Tab 1 Content</h2>
<p class="text-gray-300 dark:text-gray-200">This is the content for Tab 1. It could include various elements like images, text, and interactive features.</p>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded mb-2">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-200 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Onglets
Un composant d’onglets minimaliste pour les sites Web de commerce électronique avec des éléments interactifs, un design réactif et une prise en charge du mode sombre.
Composant Onglets neumorphes
Un composant d’onglets neumorphiques en niveaux de gris pour le contenu de blog, avec un design réactif et la prise en charge du mode sombre.
Composant Onglets Neumorphisme
Composant d’onglets neumorphiques pour les interfaces utilisateur des tableaux de bord, doté d’un jeu de couleurs en niveaux de gris, d’un design réactif et d’une prise en charge des thèmes sombres en utilisant uniquement HTML et Tailwind CSS.