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 de pestañas de neumorfismo
Un componente de pestañas neumórficas para interfaces de usuario de paneles, con un esquema de color en escala de grises, diseño receptivo y compatibilidad con temas oscuros que usan solo HTML y Tailwind CSS.
Componente Pestañas - Trabajo/Carrera
Un componente de pestañas responsivo con una estética de Material Design y una combinación de colores pastel, adecuado para bolsas de trabajo o plataformas profesionales. Incluye soporte para modo oscuro.
Componente de pestañas skeuomórficas
Un componente de pestañas responsivo con estilo skeuomorphism, que utiliza Tailwind CSS para imitar elementos de diseño del mundo real. Incluye soporte para temas oscuros e imágenes de marcador de posición.