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 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.
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.
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.