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.
Codice HTML
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:text-lg focus:font-extrabold focus:uppercase focus:tracking-wider focus:bg-emerald-600 focus:text-lime-50 focus:ring-4 focus:ring-lime-300 focus:ring-offset-4 focus:ring-offset-emerald-900 dark:focus:bg-emerald-800 dark:focus:text-lime-200 dark:focus:ring-lime-600 dark:focus:ring-offset-emerald-950 dark:focus:ring-offset-8 transition-all duration-300 ease-in-out">Skip to Main Content</a>
<main id="main-content" class="min-h-screen bg-lime-50 text-emerald-900 dark:bg-emerald-950 dark:text-lime-50 p-8 container mx-auto flex items-center justify-center">
<h1 class="text-4xl md:text-6xl font-black uppercase tracking-widest text-center leading-tight">Main Booking Content Starts Here</h1>
</main>Componenti correlati
Vai al componente Collegamento contenuto
Un componente web che fornisce un link per passare al contenuto principale, stilizzato in Material Design con una combinazione di colori pastello, adatto per siti di e-commerce. Presenta un design reattivo con supporto per il tema scuro.
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.
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.