Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Keep scrollbar sticky to bottom of window Tailwind

byMR
July 29, 2023

I have the following I have built: https://play.tailwindcss.com/TNyt801jvi

Now I am struggling to keep the scroll bar sticky at the bottom of the page/window no matter the content height.

Is anyone able to help me here? tried various height attributes but nothing changes.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

>Solution :

You could consider applying min-height: 100vh via the min-h-screen utility class to the scrolling container:

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="flex">
  <div class="shrink-0">
    <div class="py-10"></div>
    <div class="p-4">
      <p class="text-brand line-clamp-none text-left font-sans text-lg font-semibold">PHP</p>
      <p class="text-brand line-clamp-none text-left font-sans text-base font-normal">This is the description</p>
    </div>
    <div class="p-4">
      <p class="text-brand line-clamp-none text-left font-sans text-lg font-semibold">JavaScript</p>
      <p class="text-brand line-clamp-none text-left font-sans text-base font-normal">This is the description</p>
    </div>
    <div class="p-4">
      <p class="text-brand line-clamp-none text-left font-sans text-lg font-semibold">React</p>
      <p class="text-brand line-clamp-none text-left font-sans text-base font-normal">This is the description</p>
    </div>
  </div>
  <div class="flex flex-1 flex-row space-x-10 overflow-auto min-h-screen">
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
    <div>
      <div>
        <h2 class="text-brand mb-2 text-center font-sans text-3xl font-bold leading-tight tracking-tight">Bob</h2>
        <div class="flex justify-center space-x-10"><p class="text-brand line-clamp-none text-center font-mono text-base font-normal">Proficiency</p></div>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
      <div class="flex justify-center space-x-10 p-6">
        <button type="button" class="whitespace-no-wrap focus:shadow-outline-danger relative flex h-12 w-12 shrink-0 items-center justify-center space-x-2 rounded-full bg-red-600 text-white transition duration-300 hover:bg-red-600 focus:bg-red-600 focus:outline-none active:bg-red-600 disabled:cursor-not-allowed disabled:bg-red-400">
          <div class="flex items-center space-x-3 whitespace-pre"><div>1</div></div>
        </button>
      </div>
    </div>
  </div>
</div>

To address the comment regarding with a header, consider using a vertical flex or a grid layout:

<div class="grid grid-rows-[auto_1fr] min-h-screen">
  <header class="py-20">
    This is the header of the page
  </header>
  <div class="flex">

https://play.tailwindcss.com/9UvwCXP7Ah

byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading