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 collegamento al contenuto
Un componente Salta al collegamento al contenuto con stile di progettazione Neumorfismo, una combinazione di colori triadica e un layout complesso per blog e siti Web di contenuti. Include un design reattivo e il supporto per la modalità oscura utilizzando Tailwind CSS.
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.