EN VI

Css - place a button at the footer with tailwind?

How to Css - place a button at the footer with tailwind

I am working on tailwind to build a sidebar, in which the logout button should be in the footer area of the sidebar.

the code can be seen in https://play.tailwindcss.com/PcvYlOmLtg

<div class="flex w-full bg-gray-50">
  <nav class="h-screen w-64 flex-col justify-between rounded-md bg-white transition duration-150 ease-in-out">
    <div class=" ">
      <div class="flex items-center justify-between px-2 py-5">
        <div class="mr-5 flex items-center">
          <div class="mr-5">
            <div class="relative inline-block shrink-0 cursor-pointer rounded-[.95rem]">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 24px;height:24px;">
                <path xmlns="http://www.w3.org/2000/svg" d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z" fill="#0473ff" data-original="#28b446" />
                <path xmlns="http://www.w3.org/2000/svg" fill="#0473ff" data-original="#219b38" d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z" />
              </svg>
            </div>
          </div>
          <div class="mr-2">
            <a href="javascript:void(0)" class="dark:hover:text-primary hover:text-primary text-secondary-inverse text-[1.075rem] font-medium transition-colors duration-200 ease-in-out dark:text-neutral-400/90" target="_blank">name </a>
          </div>
        </div>
        <a class="text-dark group relative inline-flex cursor-pointer items-center justify-end rounded-[.95rem] border-0 bg-transparent text-center align-middle text-base font-medium leading-normal shadow-none transition-colors duration-150 ease-in-out" href="javascript:void(0)" target="_blank">
          <span class="group-hover:text-primary text-secondary-dark peer shrink-0 leading-none transition-colors duration-200 ease-in-out"> </span>
        </a>
      </div>
      <div class="my-2 rounded-lg bg-[#dce3ef40]">
        <ul class="space-y-0">
          <li href="/overview" class="flex cursor-pointer items-center space-x-4 px-4 py-2 hover:bg-indigo-100">
            <div></div>
            <a href="#">Overview</a>
          </li>
          <li href="/dataasset" class="flex cursor-pointer items-center space-x-4 px-4 py-2 font-bold text-blue-700 hover:bg-indigo-100">
            <div></div>
            <a href="#">dataset</a>
          </li>
          <li href="/dashboard" class="flex cursor-pointer items-center space-x-4 px-4 py-2 hover:bg-indigo-100">
            <div></div>
            <a href="#">dashboard</a>
          </li>
          <li href="/user" class="flex cursor-pointer items-center space-x-4 px-4 py-2 hover:bg-indigo-100">
            <div></div>
            <a href="#">user</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="flex cursor-pointer items-center space-x-4 bg-white pb-10 pl-10 hover:bg-indigo-100">
      <a> logout </a>
    </div>
  </nav>
</div>

the code failed to show the logout button in the footer, how would I fix this ?

Solution:

You need to make 2 changes to your code:

Add flex class to your <nav> element. flex-col only works on elements that you have explicitly set as flex containers
Add grow class to the first <div> inside your <nav>. This will make it take as much vertical space as possible, effectively pushing your logout <div> to the bottom.

See the code with those classes already added here: https://play.tailwindcss.com/mduUz7GizJ