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.
Código HTML
<div class="p-4 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
<div class="w-full max-w-2xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
<div class="flex space-x-4 mb-6">
<button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
transition ease-in-out duration-300">
Overview
</button>
<button class="flex-1 py-3 px-4 rounded-lg text-gray-800 dark:text-white text-sm font-medium
bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
transition ease-in-out duration-300">
Analytics
</button>
<button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium
shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
transition ease-in-out duration-300">
Reports
</button>
</div>
<div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
<!-- Content for the active tab -->
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Analytics Dashboard</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Card 1 -->
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h4>
<p class="text-2xl font-bold text-gray-900 dark:text-white">1,234,567</p>
</div>
<!-- Card 2 -->
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Page Views</h4>
<p class="text-2xl font-bold text-gray-900 dark:text-white">5,678,901</p>
</div>
<!-- Card 3 -->
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Bounce Rate</h4>
<p class="text-2xl font-bold text-gray-900 dark:text-white">32.5%</p>
</div>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #4a4a4a;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #4a4a4a;
}
</style>
</div>Componentes relacionados
Componente de pestañas de Glassmorphism
Un componente de pestañas responsivo con estilo glassmorphism, diseñado para interfaces de redes sociales. Presenta un efecto similar al vidrio esmerilado usando Tailwind CSS con un esquema de color en escala de grises. El diseño es compatible con el modo oscuro.
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 Pestañas
Un componente de pestañas responsivas con microinteracciones para sitios web comerciales/corporativos, con colores complementarios y soporte para modo oscuro.