Composant Onglets
Un composant d’onglets minimaliste et dynamique pour le commerce électronique avec une complexité modérée, un design réactif et une prise en charge du thème sombre, mis en œuvre à l’aide de Tailwind CSS et HTML.
HTML Code
<div class="w-full max-w-md mx-auto">
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
Description
</button>
<button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none border-b-2 border-blue-600 dark:border-blue-400">
Reviews
</button>
<button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
Shipping
</button>
</div>
<div class="mt-8">
<!-- Content goes here based on the active tab -->
<div class="text-gray-700 dark:text-gray-300">
<!-- Reviews Content (Example) -->
<h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
<p class="mt-2">This product is amazing! I highly recommend it.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">4 days ago</p>
<p class="mt-2">Great quality and fast shipping.</p>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
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.
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.