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

Retro_Industrial_Skip_Content

Eine Link-Komponente im Retro-/Vintage-Stil für Industrie- und Fertigungswebsites mit 80er/90er-Jahre-Ästhetik, einem komplementären Farbschema (Orange/Blaugrün) und Unterstützung für den Dunkelmodus. Diese komplexe Komponente enthält interaktive Elemente für eine umfassende Benutzererfahrung.

Offen

Zur Inhaltslink-Komponente springen

Eine Webkomponente, die unter Verwendung von Tailwind CSS einen 3D-formatierten Link "Zum Inhalt springen" mit responsiven Effekten und Unterstützung für dunkle Themen bereitstellt.

Offen