Componente Pestañas
Un componente de pestañas responsivas diseñado para interfaces de redes sociales, con microinteracciones y un tema oscuro. El componente incluye múltiples elementos interactivos y utiliza Tailwind CSS.
Código HTML
<div class="bg-gray-900 dark:bg-gray-800 p-4 rounded-lg">
<div class="flex space-x-4 border-b border-gray-700">
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600" aria-selected="true">Tab 1</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 2</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 3</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 4</button>
</div>
<div class="mt-4">
<div class="tab-content py-6 px-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-white">Tab 1 Content</h2>
<p class="text-gray-300 dark:text-gray-200">This is the content for Tab 1. It could include various elements like images, text, and interactive features.</p>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded mb-2">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-200 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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 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.