Componentes Saltar al enlace de contenido Saltar al componente de enlace de contenido: esqueuomorfismo en escala de grises

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.

Vista previa

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.

Abrir

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.

Abrir

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.

Abrir