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 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.
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.
Composant Onglets
Un composant Tabs réactif avec un style Material Design, une palette de couleurs monochromatiques et une prise en charge du thème sombre, conçu avec Tailwind CSS pour les sites Web à fort contenu.