how to have a dropdown activate when input is focused?

Issue

I'm trying to make a reddit clone MERN and need a dropdown like the dorpdown in the reddit search bar

the styling is not an issue the issue is to make the dropdown appear when the input bar is focused

also i am using tailwindcss

can anyone please tell me how to do this?

Solution

const show = () => {
  document.querySelector('.content').classList.add("active")
}

const hide = () => {
  document.querySelector('.content').classList.remove("active")
}

.dropdown{
  display: flex;
  flex-direction: column;
  position: relative;
  width: 200px;
}

input{
  width: 100%;
}

.content{
  background: red;
  padding: 4px;
  position: absolute;
  top: 100%;
  width: 100%;
  display: none;
}

.active{
  display: flex;
  
  }

<div class = "dropdown">
  <input onFocus = "show()" onBlur = "hide()" />
  <div class = "content">
    Dropdown
  </div>
</div>

React and Tailwind

const Dropdown = () => {
  const [isFocus, setIsFocus] = React.useState(false);
  return (
    <div className = "w-40 border m-4">
      <input
        className = "w-full"
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
      />
      { isFocus && <div className = "bg-red-300">Dropdown</div>}
    </div>
  );
};

Answered By - Vugar Taghiyev