Componente Pestañas
Un componente de pestañas minimalista y vibrante para comercio electrónico con complejidad moderada, diseño receptivo y soporte de temas oscuros, implementado con Tailwind CSS y HTML.
Código 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>Componentes relacionados
Componente Pestañas
Un componente de Tabs responsivo con estilo Material Design, combinación de colores monocromática y compatibilidad con temas oscuros, creado con Tailwind CSS para sitios web con mucho contenido.
GlassyGrayscaleTabs
Glassmorphism Componente de pestañas de tablero simple en escala de grises con soporte para modo oscuro
Componente de pestañas de modo oscuro
Un componente de pestañas responsivo diseñado teniendo en cuenta el modo oscuro, que utiliza Tailwind CSS.