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

Zur Inhaltslink-Komponente springen

Eine reaktionsschnelle Linkkomponente "Zum Inhalt springen" für ein Dashboard mit dem Stil "Neumorphismus" und dem Farbschema "Erdtöne".

Offen

Zum Inhaltslink springen

Eine reaktionsschnelle Komponente "Zum Inhaltslink springen", die in einem skeuomorphen Stil mit einem pastellfarbenen Farbschema gestaltet ist. Diese Komponente ist für die Nutzung von Blogs und Inhalten gedacht und bietet Unterstützung für den Dunkelmodus.

Offen

Zur Inhaltslink-Komponente springen

Eine Komponente vom Typ "Zum Inhaltslink springen", die mit skeuomorphen Elementen entworfen wurde, die einer physischen Schaltfläche ähneln. Die Komponente verfügt über ein pastellfarbenes Schema, eine moderate Komplexität einschließlich Hover-Effekten und Unterstützung für dunkles Design.

Offen