Vai al collegamento al contenuto
Un componente reattivo Salta al collegamento al contenuto progettato in uno stile scheumorfico con una combinazione di colori pastello. Questo componente è destinato al consumo di blog e contenuti e include il supporto per la modalità scura.
Codice HTML
<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>Componenti correlati
Vai al collegamento al contenuto
Passa al collegamento al contenuto Componente allineato ai principi di Material Design, con design reattivo, supporto per la modalità scura e una semplice combinazione di colori monocromatici per le applicazioni di social media.
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 collegamento al contenuto
Un componente di collegamento "Salta al contenuto" per l'accessibilità, progettato per dashboard in modalità scura con una combinazione di colori in scala di grigi. È moderatamente complesso a causa dello stile reattivo e della modalità oscura. Non viene utilizzato alcun JavaScript. Utilizza Tailwind CSS con i prefissi dark: per il supporto del tema scuro.