css Question posted in
Some basic documentation can be found here.

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>

enter image description here

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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Add css to this div:

     margin-top: auto;
 height: 100%;

<div class="flex cursor-pointer items-center space-x-4 bg-white pb-10 pl-10 hover:bg-indigo-100">
      <a> logout </a>
</div>
    Login or Signup to reply.
  3. 0

    I’ve added the mt-auto class to the logout button’s container div. This class sets the top margin to auto, pushing the button to the bottom of the sidebar.
    This ensures that the logout button is positioned at the bottom of the sidebar regardless of the sidebar’s content height.

    checkout this code https://play.tailwindcss.com/rkjSlySQ0K

    final output image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search