Vai al componente Collegamento contenuto
Un componente Salta al collegamento al contenuto progettato con elementi 3D, tonalità della terra e personalizzato per le interfacce del dashboard. Include stili per temi chiari e scuri.
Codice HTML
<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>Componenti correlati
Brutalista Vai al link al contenuto (Foresta/Verde)
Un componente di collegamento "Salta al contenuto" grezzo e audace progettato in uno stile brutalista con una tavolozza di colori foresta/verde, adatto per i sistemi di prenotazione/prenotazione. È reattivo e supporta la modalità oscura.
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.
SkipToContentLink
Vai al componente Collegamento contenuto con interfaccia utente in modalità scura, combinazione di colori triadica e complessità semplice per l'e-commerce.