Componente Schede
Un componente Tabs minimalista e vivace per l'e-commerce con complessità moderata, design reattivo e supporto per temi scuri, implementato utilizzando Tailwind CSS e HTML.
Codice HTML
<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>Componenti correlati
Industrial_Monochromatic_Tabs_Component_Booking_Reservation
Un componente di schede semplice e reattivo con un'estetica industriale e monocromatica, progettato per i sistemi di prenotazione e prenotazione. Supporta la modalità oscura e utilizza materie prime ed elementi esposti per un appeal utilitaristico.
Schede di Material Design
Componente Tabs con stile Material Design, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS, senza JavaScript.
Componente Schede Skeuomorfe
Un componente di schede reattive con scheumorfismo, che utilizza Tailwind CSS per imitare gli elementi di design del mondo reale. Include il supporto per il tema scuro e le immagini segnaposto.