Saltar al componente de enlace de contenido: esqueuomorfismo en escala de grises
Un enlace simple y receptivo "Saltar al contenido" con diseño esqueuomórfico en escala de grises para el contenido del blog. Incluye soporte para modo oscuro.
Código HTML
<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>
<main id="main-content" class="p-4">
<!-- Your main content goes here -->
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
<p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>
Componentes relacionados
Saltar al enlace de contenido
Un componente de enlace "Saltar al contenido" para la accesibilidad, diseñado para paneles de control en modo oscuro con un esquema de color en escala de grises. Es moderadamente complejo debido al estilo responsivo y del modo oscuro. No se utiliza JavaScript. Utiliza CSS de Tailwind con prefijos dark: para el soporte de temas oscuros.
Saltar al componente de enlace de contenido
Un componente web que proporciona un enlace de estilo 3D 'Saltar al contenido' con efectos responsivos y compatibilidad con temas oscuros, utilizando Tailwind CSS.
Saltar al componente de enlace de contenido
Un componente de enlace "Saltar al contenido" visualmente atractivo diseñado para paneles con un enfoque en microinteracciones, utilizando un esquema de color complementario y soporte de modo oscuro a través de Tailwind CSS.