Torna all'inizio Componente pulsante
Un semplice pulsante Torna all'inizio progettato in stile brutalista utilizzando Tailwind CSS, adatto per un sito web di portfolio. È dotato di una combinazione di colori in scala di grigi e supporto per temi scuri.
Codice HTML
<div class="fixed bottom-5 right-5 z-50">
<a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
⬆️
</a>
</div>
<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
<div class="container mx-auto p-5">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
<p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
</div>
</div>
</div>Componenti correlati
Torna all'inizio Componente pulsante
Un pulsante "Torna all'inizio" reattivo con animazioni incentrate sulla microinterazione, combinazione di colori triadici e supporto per temi scuri, adatto per un portfolio.
Brutalista Torna all'inizio Pulsante
Un brutalista pulsante back-to-top in Tailwind CSS, con contrasto elevato, tipografia audace e bordi affilati. Include il supporto per il dimensionamento reattivo e la modalità scura.
Torna all'inizio Componente pulsante
Un componente Back to Top Button in stile brutalista che utilizza Tailwind CSS. Questo componente ha un design audace e ad alto contrasto e supporta effetti reattivi e tema scuro.