Componenti Vai al collegamento al contenuto Vai al componente Collegamento contenuto

Vai al componente Collegamento contenuto

Un componente di collegamento "Salta al contenuto" visivamente accattivante progettato per dashboard con particolare attenzione alle microinterazioni, utilizzando una combinazione di colori complementare e il supporto della modalità oscura tramite Tailwind CSS.

Anteprima

Codice HTML

<div class="relative">
    <a href="#content" class="skip-to-content block p-4 text-white bg-blue-500 transition-opacity duration-300 ease-in-out hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-pink-400">
        Skip to Content
    </a>
    <div class="absolute top-0 left-0 p-2 mt-2 rounded-md bg-gray-800 dark:bg-gray-900">
        <p class="text-sm text-gray-300 dark:text-gray-200">Press <span class="font-semibold">Tab</span> to focus on the link and skip to the main content.</p>
    </div>
</div>
<div id="content" class="mt-10 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard Content</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 1</p>
        </div>
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 2</p>
        </div>
    </div>
</div>

Componenti correlati

Retro_Industrial_Skip_Content

Un componente di collegamento "salta al contenuto" in stile retrò/vintage per siti Web industriali e manifatturieri, con un'estetica anni '80/'90, una combinazione di colori complementari (arancione/verde acqua) e supporto per la modalità scura. Questo componente complesso include elementi interattivi per un'esperienza utente ricca.

Aperto