Salta al componente del collegamento al contenuto - Skeuomorphism Scala di grigi
Un link "Salta al contenuto" semplice e reattivo con design Skeuomorphic in scala di grigi per i contenuti del blog. Include il supporto per la modalità oscura.
Codice HTML
<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>Componenti correlati
Vai al collegamento al contenuto
Un componente Passa al collegamento al contenuto con uno stile basato sui principi di Material Design, una combinazione di colori monocromatica e il supporto della modalità scura. È adatto per siti di e-commerce ed è costruito utilizzando Tailwind CSS senza JavaScript.
Vai al componente Collegamento contenuto
Glassmorphism Salta al collegamento al contenuto con un effetto vetro smerigliato, sfocatura, reattività e supporto per la modalità scura utilizzando Tailwind CSS, senza JavaScript.
Vai al componente Collegamento contenuto
Un collegamento Salta al contenuto in stile 3D visivamente accattivante che aiuta gli utenti a bypassare i menu di navigazione su un'interfaccia di social media. Il componente utilizza uno schema di colori complementari (blu e arancione) con un effetto 3D ottenuto attraverso ombre e trasformazioni. Presenta un design reattivo e il supporto per temi scuri. Il collegamento appare fisso nella parte superiore sinistra della finestra quando è attivo o attivo, il che lo rende facilmente accessibile per la navigazione da tastiera pur rimanendo discreto quando non è in uso.