Retour en haut de la page Composant du bouton
Un simple bouton Retour en haut conçu dans un style brutaliste à l’aide de Tailwind CSS, adapté à un site web de portfolio. Il dispose d’une palette de couleurs en niveaux de gris et d’une prise en charge du thème sombre.
HTML Code
<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>Composants associés
Retour en haut de la page Composant du bouton
Un composant de bouton de retour en haut réactif avec un design Glassmorphism, une palette de couleurs de tons de terre et des interactions complexes, adapté à un tableau de bord.
Retour en haut du bouton
Un composant de bouton « Retour en haut » minimal et réactif avec prise en charge du mode sombre. Il apparaît après avoir fait défiler vers le bas et utilise un défilement fluide pour ramener l’utilisateur en haut de la page lorsqu’il clique dessus. Aucun JavaScript n’est utilisé pour le défilement, seulement du CSS.
Retour en haut du bouton
Un bouton minimaliste « Back to Top » avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.