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

Zur Inhaltslink-Komponente springen

Eine Skip to Content Link-Komponente, die mit 3D-Elementen und Erdtönen entworfen und auf Dashboard-Schnittstellen zugeschnitten ist. Es enthält Stile für helle und dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col gap-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
    <a href="#content" class="flex items-center justify-center h-12 px-4 font-medium text-white bg-brown-700 rounded-full shadow-md dark:bg-green-600 hover:bg-brown-600 dark:hover:bg-green-500 transition duration-300">
        Skip to Content
    </a>
    <p class="text-gray-800 dark:text-gray-300">
        Use this link to quickly navigate to the main content of the dashboard.
    </p>
    <img src="https://picsum.photos/200/100" alt="Dashboard Image" class="rounded-lg shadow-md" />
    <div class="flex items-center gap-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" />
        <span class="text-gray-800 dark:text-gray-300">User: John Doe</span>
    </div>
</div>

Verwandte Komponenten

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

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