Componente Pestañas
Un componente de pestañas responsivo diseñado para el modo oscuro usando Tailwind CSS. Cuenta con diferentes pestañas en las que los usuarios pueden hacer clic para revelar el contenido, junto con imágenes de marcador de posición y avatares.
Código HTML
<div class="bg-gray-800 text-white rounded-lg shadow-md">
<div class="flex border-b border-gray-700">
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab1')">Tab 1</button>
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab2')">Tab 2</button>
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab3')">Tab 3</button>
</div>
<div id="tab1" class="p-4">
<h2 class="text-lg font-semibold">Tab 1 Content</h2>
<p>Content for tab 1 goes here.</p>
<img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>John Doe</span>
</div>
</div>
<div id="tab2" class="hidden p-4">
<h2 class="text-lg font-semibold">Tab 2 Content</h2>
<p>Content for tab 2 goes here.</p>
<img src="https://picsum.photos/400/200?random=2" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Jane Doe</span>
</div>
</div>
<div id="tab3" class="hidden p-4">
<h2 class="text-lg font-semibold">Tab 3 Content</h2>
<p>Content for tab 3 goes here.</p>
<img src="https://picsum.photos/400/200?random=3" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Mike Smith</span>
</div>
</div>
</div>Componentes relacionados
Industrial_Monochromatic_Tabs_Component_Booking_Reservation
Un componente de pestañas simple y sensible con una estética industrial y monocromática, diseñado para sistemas de reserva y reservas. Es compatible con el modo oscuro y utiliza materias primas y elementos expuestos para un atractivo utilitario.
Componente Pestañas
Un componente de pestañas responsivas diseñado en un estilo skeuomórfico para una aplicación de comercio electrónico, utilizando un esquema de color pastel y Tailwind CSS.
OrganicTabsComponent
Un componente de pestañas simple y receptivo con un diseño orgánico inspirado en la naturaleza y una combinación de colores azul corporativo, adecuado para plataformas de música/audio. Incluye soporte para modo oscuro.