Back to Top Button Component
A simple Back to Top button designed in a brutalist style using Tailwind CSS, suitable for a portfolio website. It features a grayscale color scheme and dark theme support.
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>Related Components
Back to Top Button - Brutalism
A brutalist 'Back to Top' button component for a portfolio, with a triadic color scheme and simple design. It is responsive and supports dark mode using Tailwind CSS.
Brutalist Back to Top Button
A brutalist back-to-top button in Tailwind CSS, with high contrast, bold typography and sharp edges. Includes responsive sizing and dark mode support.
Back to Top Button
A minimalist, flat designed Back to Top button that fits within a dashboard interface. The button is styled in a monochromatic color scheme and includes hover and focus effects for better interactivity. It is also responsive and supports dark mode.