Components Back to Top Button Back to Top Button Component

Back to Top Button Component

A minimalist and flat Back to Top Button Component for dashboards, featuring a monochromatic color scheme. It's moderately complex with interactive features, a responsive design, and dark theme support, built purely with HTML and Tailwind CSS.

Preview

HTML Code

<div class="fixed bottom-4 right-4">
  <a href="#" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-full shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors duration-300 ease-in-out flex items-center justify-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
    </svg>
  </a>
</div>

Related Components

Back to Top Button

Back to Top Button Component with 3D design, vibrant color scheme, and complex interactive elements for social media interfaces, using Tailwind CSS. It includes responsive design and dark theme support.

Open

Back to Top Button Component

A brutalist styled Back to Top Button component using Tailwind CSS. This component has bold, high-contrast design and supports responsive effects and dark theme.

Open

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.

Open