How to make a certain element shortened in size after certain breakpoints (Tailwind css)

Issue

So, Im new to react/web dev.

Just learnt the fundamentals of media-query,But I can't get my mind through this particular problem where in I want to change the size of the search container in the navbar to a another smaller element(magnifing glass), when the user switches from desktop to mobile version.

I have used <div class ="search invisible lg:visible">but I cant figure how to replace the invisible with some other element.

#Code

This is the entire nav-bar.

            <div class = "flex text-white justify-start items-center">
                <div class = "hamburger-menu-container">
                    <i class="fa-solid fa-bars"></i>
                </div>
                <div class = "github-icon-container">
                    <i class="fa-brands fa-github fa-2xl"></i>
                </div>
                <div class = "dashboard-label-container">
                    <p class = "dash-font">Dashboard</p>
                </div>
            </div>
            <div class = "flex items-center items-center justify-end">
                <div class = "search">
                    <i id = "magnifing-icon" class="fa-solid fa-magnifying-glass"></i>
                    <div class = "msg-search-nav">
                        <div class = "msg-search-desc text-sm text-white pr-40">Type / for search</div>
                    </div>
                    <img class = "palette-icon w-5 p-1" src={command_palette} alt="" />
                </div>
                <div class = "flex nav-link items-center">
                    <i id = "plus-icon" class="fa-solid fa-plus"></i>
                    <select name="" id="select">
                        <option></option>
                    </select>
                </div>
                <div class = "nav-link">
                    <i class="nav-link-icon fa-regular fa-circle-dot"></i>
                </div>
                <div class  = "nav-link">
                    <i class="nav-link-icon fa-solid fa-code-pull-request"></i>
                </div>
                <div class ="nav-link">
                    <i class="nav-link-icon fa-solid fa-envelope"></i>
                </div>
                <img class="face-nav" src="https://avatars.githubusercontent.com/u/76707560?s=80&amp;v=4"/>
            </div>

                <div class = "search">
                    <i id = "magnifing-icon" class="fa-solid fa-magnifying-glass"></i>
                    <div class = "msg-search-nav">
                        <div class = "msg-search-desc text-sm text-white pr-40">Type / for search</div>
                    </div>
                    <img class = "palette-icon w-5 p-1" src={command_palette} alt="" />
                </div>
                <div class = "flex nav-link items-center">
                    <i id = "plus-icon" class="fa-solid fa-plus"></i>
                    <select name="" id="select">
                        <option></option>
                    </select>
                </div>

Solution

Consider applying display: none and display: block when you want to hide/show the element respectively. This would be more suitable for your case rather than visibility: hidden and visibility: visible as visibility: hidden means the element still takes up layout space. This means when it is invisible, there could be some blank space behavior that you'd have to wrestle with.

For replacing with a more compact element, you could have another element that has the opposite display values:

<div class="… hidden lg:block">
  …
</div>
<div class="block lg:hidden">
  …
</div>

<script src="https://cdn.tailwindcss.com/3.4.0"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="flex text-white justify-start items-center">
  <div class="hamburger-menu-container">
    <i class="fa-solid fa-bars"></i>
  </div>
  <div class="github-icon-container">
    <i class="fa-brands fa-github fa-2xl"></i>
  </div>
  <div class="dashboard-label-container">
    <p class="dash-font">Dashboard</p>
  </div>
</div>
<div class="flex items-center items-center justify-end">
  <div class="search hidden lg:block">
    <i id="magnifing-icon" class="fa-solid fa-magnifying-glass"></i>
    <div class="msg-search-nav">
      <div class="msg-search-desc text-sm text-white pr-40">
        Type / for search
      </div>
    </div>
    <img class="palette-icon w-5 p-1" src="command_palette" alt="" />
  </div>
  <div class="block lg:hidden border rounded p-2">
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>
  <div class="flex nav-link items-center">
    <i id="plus-icon" class="fa-solid fa-plus"></i>
    <select name="" id="select">
      <option></option>
    </select>
  </div>
  <div class="nav-link">
    <i class="nav-link-icon fa-regular fa-circle-dot"></i>
  </div>
  <div class="nav-link">
    <i class="nav-link-icon fa-solid fa-code-pull-request"></i>
  </div>
  <div class="nav-link">
    <i class="nav-link-icon fa-solid fa-envelope"></i>
  </div>
  <img
    class="face-nav"
    src="https://avatars.githubusercontent.com/u/76707560?s=80&amp;v=4"
  />
</div>

Answered By - Wongjn