Saltar al componente de enlace de contenido
Un componente de enlace neumórfico 'Saltar al contenido' para la accesibilidad en aplicaciones de tecnología/SaaS, con un esquema de color púrpura/violeta y una capacidad de respuesta completa con soporte para modo oscuro.
Código HTML
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a148c,
-6px -6px 12px #9c27b0;
}
</style>Componentes relacionados
Brutalista Saltar al contenido Enlace (Bosque/Verde)
Un componente de enlace "Saltar al contenido" en bruto y audaz diseñado en un estilo brutalista con una paleta de colores bosque/verde, adecuado para sistemas de reservas/reservas. Es responsivo y admite el modo oscuro.
SkipToContentLink
Vaya al componente de enlace de contenido con interfaz de usuario de modo oscuro, combinación de colores triádica y complejidad simple para el comercio electrónico.
Saltar al enlace de contenido
Un componente Saltar al enlace de contenido con un diseño en escala de grises 3D para sitios web empresariales. Es responsivo y admite el modo oscuro usando Tailwind CSS. Sin JavaScript.