CCHub Logo CCHub Tailwind Collection
Komponenten Zum Inhaltslink springen Zur Inhaltslink-Komponente springen - Skeuomorphism Grayscale

Zur Inhaltslink-Komponente springen - Skeuomorphism Grayscale

Ein einfacher, responsiver "Zum Inhalt springen"-Link mit skeuomorphem Design in Graustufen für Blog-Inhalte. Enthält Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Zum Inhaltslink springen

Ein minimalistischer Link zum Überspringen von Inhalten für die Barrierefreiheit in Webanwendungen, der für Dashboards entwickelt wurde.

Offen

Zum Inhaltslink springen

Skip to Content Link Component orientiert sich an den Prinzipien des Material Designs und bietet responsives Design, Unterstützung für den Dunkelmodus und ein einfaches monochromatisches Farbschema für Social-Media-Anwendungen.

Offen

Zur Inhaltslink-Komponente springen

Eine saubere, minimalistische "Zum Inhalt springen"-Linkkomponente für Sport-/Fitnessanwendungen, die mit einem Graustufen-Farbschema gestaltet ist. Es ist reaktionsschnell und unterstützt den Dunkelmodus, wobei Typografie und Zugänglichkeit im Vordergrund stehen.

Offen