How to create a bar near to text in Tailwind CSS?

Question

I am a beginner to Tailwind CSS. And I am finding it difficult to create a button design as shown in the picture in tailwind Css

So I want to display that little bar on the right when the individual section like eg. Home,Trends,Feed are pressed. So can you please help me out with it. I want the answer in tailwind css.

Here is the code:

<div className="flex">
      <div className="w-72 bg-white text-gray-100 shadow-lg">
        <div class="flex h-full flex-col p-7 pl-8 text-sm">
          <div class="relative flex w-full items-center justify-between">
            <a class="flex space-x-5 py-5 text-slate-800">
              <MusicNoteIcon class="h-5 w-5"></MusicNoteIcon>
              <p class="font-semibold">Sovereignty Kingdom</p>
            </a>
            <button class="delay-50 absolute right-[3px] h-10 cursor-pointer rounded-full p-2 text-slate-800 transition duration-200 ease-in-out hover:scale-110 hover:bg-black hover:text-white">
              <SwitchHorizontalIcon class="h-5 w-5"></SwitchHorizontalIcon>
            </button>
          </div>

          <nav className="delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition duration-200 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
            <HomeIcon className="h-5 w-5" />
            <p>Home</p>
          </nav>
          <nav className="delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition duration-200 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
            <TrendingUpIcon className="h-5 w-5" />
            <p>Trends</p>
          </nav>
          <nav className="delay-50 duration-2 cursor-pointer00 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 text-slate-800 transition ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black hover:text-white">
            <RssIcon className="h-5 w-5" />
            <p>Feed</p>
          </nav></div>
      </div>




</div>```

Answer 1

I'm not sure if this is the only solution, but this worked for me:

The first thing I did was define an array for the buttons group :

const elements=[
        {name:'Home',ico:faHome},    //I'm using font awesome Icons,you can use yours
        {name:'Trend',ico:faFireAlt},   
        {name:'Feed',ico:faFeed}    
    ]

then I defined a state so that I know which button was clicked like

 //(-1) is the button id, default (-1) so that the bar won't render by default 
const [clickedId, setClickedId] = useState(-1);

Here is the full code:

<div className='flex m-14 w-72   '>
  <div className="w-full  bg-white text-gray-100 shadow-lg">
    <div className="flex h-full flex-col p-7 pl-8 text-sm">
      <div className="relative flex w-full items-center justify-between">
        <a className="flex space-x-5 py-5 text-slate-800">
          <div className="h-5 w-5 bg-teal-800 rounded-full"></div>
          <p className="font-semibold">Sovereignty Kingdom</p>
        </a>
        <button className="delay-50 absolute right-[3px] h-10 cursor-pointer rounded-full p-2 text-slate-800 transition duration-200 ease-in-out hover:scale-110 hover:bg-black hover:text-white">
          <div className="h-5 w-5 bg-teal-800 rounded-full"></div>
        </button>
        
      </div>
      {/* map over the buttons array to render them  */}

      {elements.map((el,id)=>(
     {/* give every button a key */}
        <button key={id} name={el.name}

      {/* when a button is clicked assign clickedId to the current button id */}
        onClick={() => setClickedId(id)} 
      {/* based on the button id append classes to make the sidebar */}
        className={`relative delay-50 my-2 flex cursor-pointer items-center space-x-3 rounded-lg p-3 
                text-slate-800 transition duration-75 ease-in-out hover:-translate-y-1
                 hover:scale-110 hover:bg-black hover:text-white
                 ${(id === clickedId) ?`after:w-1 after:h-12  after:bg-black after:rounded-full after:absolute after:-right-7
                  hover:after:transition hover:after:duration-75 hover:after:-right-4 hover:after:ease-in-out`:'' }`}>

            
            <FontAwesomeIcon className='h-5 w-5 ' icon={el.ico}/>
            <p>{el.name}</p>
        </button>
      ))}
      </div>
   </div>
</div>

or check it Live on codesandbox.