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
Saltar al componente de enlace de contenido
Glassmorphism Saltar al contenido Enlace con un efecto de vidrio esmerilado, desenfoque, capacidad de respuesta y compatibilidad con modo oscuro mediante Tailwind CSS, sin JavaScript.
Saltar al enlace de contenido
Un componente de enlace receptivo "Saltar al contenido" con estilo Glassmorphism, que implementa un esquema de color complementario, complejidad moderada y soporte de modo oscuro adecuado para sitios web comerciales / corporativos. Este componente se implementa puramente en HTML con clases CSS de Tailwind, que no requieren JavaScript.
Saltar al contenido Enlace - Retro Monocromático
Saltar al contenido Enlace Componente con diseño Retro/Vintage, Combinación de colores monocromática y Complejidad simple.