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.
Código HTML
<div class="flex flex-col w-full max-w-md mx-auto p-4">
<div class="tabs flex space-x-2">
<button class="tab px-4 py-2 font-semibold text-white bg-gray-800 rounded-lg shadow-lg focus:outline-none ">Tab 1</button>
<button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 2</button>
<button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 3</button>
</div>
<div class="tab-content mt-4 p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<div class="text-gray-700 dark:text-gray-300">
<h2 class="font-bold text-lg">Tab 1 Content</h2>
<p>This section contains information related to Tab 1.</p>
<img class="mt-2 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" />
</div>
</div>
</div>
</div>
<style>
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.bg-gray-800 { background-color: #2d3748; }
.bg-gray-200 { background-color: #4a5568; }
.text-gray-700 { color: #cbd5e0; }
}
</style>
Componentes relacionados
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.
Componente de pestañas de Glassmorphism
Componente simple de pestañas de Glassmorphism para Portfolio, con diseño responsivo y soporte para temas oscuros. Utiliza una combinación de colores vibrantes.
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.