Pestañas con Subrayado Animado

Una interfaz de usuario de pestaña sofisticada con subrayados deslizantes suaves que siguen al usuario mientras cambia entre pestañas.

Vista previa

Account settings content goes here. Manage your profile details.

Casos de uso y características

Cambio de categoría: ideal para interfaces de usuario que cambian entre diferentes secciones dentro de la misma pantalla, como categorías de artículos, pestañas en las pantallas de configuración, etc.
Ahorro de espacio: proporciona múltiples contenidos en un espacio de pantalla limitado y es eficaz incluso en entornos móviles.
Posición actual visual: la animación subrayada sigue suavemente la posición actual de la pestaña, lo que le permite comprender intuitivamente hacia dónde está mirando el usuario actualmente.

Puntos claves del diseño y UX (Design & UX)

Seguimiento de animación: Usando CSS transition o transform, implementamos un movimiento donde el subrayado se desliza.Esto proporciona una buena respuesta de que has cambiado de pestaña.
Consideraciones de accesibilidad: El color de fuente (contraste) está claramente separado entre pestañas activas e inactivas para facilitar la diferenciación visual.

Cómo personalizar (Guía de personalización)

Cambio de color: Puedes unificar el diseño simplemente cambiando clases como indigo-600 a blue-500 o emerald-600 para que coincidan con el color de la marca.
Agregar pestañas: agregue botones y paneles de contenido al HTML y ajuste la lógica de JavaScript (proporciones de width y transform) para que coincida con el número de pestañas.

Código de implementación (Implementación)

<div class="max-w-md mx-auto">
<div class="relative flex border-b border-gray-200 dark:border-zinc-800">
  <button class="tab-btn flex-1 py-3 text-sm font-medium text-indigo-600 dark:text-indigo-400" data-target="tab1">Account</button>
  <button class="tab-btn flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" data-target="tab2">Security</button>
  <button class="tab-btn flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" data-target="tab3">Notifications</button>
  
  <div id="tab-indicator" class="absolute bottom-0 left-0 h-0.5 bg-indigo-600 dark:bg-indigo-400 transition-all duration-300 ease-out" style="width: 33.33%; transform: translateX(0%);"></div>
</div>
<div class="pt-4">
  <div id="tab1" class="tab-content text-gray-600 dark:text-gray-300 text-sm">Account settings content goes here. Manage your profile details.</div>
  <div id="tab2" class="tab-content hidden text-gray-600 dark:text-gray-300 text-sm">Security settings content goes here. Change your password.</div>
  <div id="tab3" class="tab-content hidden text-gray-600 dark:text-gray-300 text-sm">Notification preferences go here. Manage email alerts.</div>
</div>
</div>
<script>
const btns = document.querySelectorAll('.tab-btn');
const contents = document.querySelectorAll('.tab-content');
const indicator = document.getElementById('tab-indicator');

btns.forEach((btn, i) => {
  btn.addEventListener('click', () => {
    btns.forEach(b => {
      b.classList.remove('text-indigo-600', 'dark:text-indigo-400');
      b.classList.add('text-gray-500', 'dark:text-gray-400');
    });
    btn.classList.remove('text-gray-500', 'dark:text-gray-400');
    btn.classList.add('text-indigo-600', 'dark:text-indigo-400');
    
    indicator.style.transform = `translateX(${i * 100}%)`;
    
    contents.forEach(c => c.classList.add('hidden'));
    document.getElementById(btn.dataset.target).classList.remove('hidden');
  });
});
</script>