Brutalism_Earth_Tone_Back_To_Top_Button

<div class="fixed bottom-4 right-4 z-50 group" x-data="{ showButton: false }" @scroll.window="showButton = (window.pageYOffset > 300) ? true : false" x-show="showButton" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90 -translate-y-4" x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-cloak>
  <button
    @click="window.scrollTo({top: 0, behavior: 'smooth'})"
    class="p-4 bg-lime-700 dark:bg-lime-900 border-2 border-stone-900 dark:border-stone-100
           text-stone-100 dark:text-stone-100 text-xl font-bold uppercase
           shadow-[4px_4px_0_0_rgba(28,25,23,1)] dark:shadow-[4px_4px_0_0_rgba(250,250,250,1)]
           hover:bg-lime-800 dark:hover:bg-lime-950
           active:shadow-[0px_0px_0_0_rgba(28,25,23,1)] active:translate-x-[4px] active:translate-y-[4px]
           focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-300/50
           transition-all duration-150 ease-in-out
           flex items-center justify-center space-x-2 w-16 h-16 sm:w-20 sm:h-20"
    aria-label="Back to top"
  >
    <svg class="w-8 h-8 sm:w-10 sm:h-10 transform -rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="square" stroke-linejoin="square" stroke-width="3" d="M9 5l7 7-7 7"></path>
    </svg>
  </button>
  <div class="absolute -top-1 -left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
  <div class="absolute top-1 left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
</div>