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.

Vorschau

HTML-Code

<a href="#main-content" class="flex items-center justify-center p-4 rounded-full shadow-md bg-gray-200 dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105 sm:bg-pink-200 md:bg-blue-200 lg:bg-green-200 dark:sm:bg-pink-800 dark:md:bg-blue-800 dark:lg:bg-green-800">
    <img src="https://picsum.photos/20" alt="Scroll down icon" class="mr-3"> 
    <span class="text-gray-800 dark:text-gray-200 font-semibold">Skip to Content</span>
</a>
<div id="main-content" class="mt-10 p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Welcome to Our Blog</h1>
    <p class="text-gray-600 dark:text-gray-300 mt-2">Here you will find various articles and content for your reading pleasure. Enjoy your stay!</p>
</div>

Verwandte Komponenten

Zum Inhaltslink springen

Eine reaktionsschnelle Linkkomponente "Zum Inhalt springen", die mit Glassmorphism gestaltet ist und ein komplementäres Farbschema, moderate Komplexität und Unterstützung für den Dunkelmodus implementiert, die für Geschäfts-/Unternehmenswebsites geeignet ist. Diese Komponente ist rein in HTML mit Tailwind CSS-Klassen implementiert und benötigt kein JavaScript.

Offen

Zur Inhaltslink-Komponente springen

Eine Webkomponente, die einen Link zum Springen zum Hauptinhalt bereitstellt, im Material Design mit einem pastellfarbenen Farbschema, geeignet für E-Commerce-Websites. Es verfügt über ein responsives Design mit Unterstützung für dunkle Themen.

Offen

Zum Inhaltslink springen

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

Offen