Trying a responsive navbar in react and tailwind css but not working in another resolution

Question

so im trying to create a responsive navbar with reactjs and tailwind css this is screen 1

in this size the screen is responsive

here it is not responsive so I want to apply the screen 2 type of navbar here

screen2 type of navbar here too

Main code

import React, { useState, useEffect } from 'react'
import {GiHamburgerMenu} from 'react-icons/gi'
import { headers_array } from './HeaderArray';
import { Link } from 'react-router-dom';
import { FaSearch } from 'react-icons/fa';
import ciniminilogo from '../Assets/ciniminilogo.png'
function Header () 
{
  const [open,setOpen]=useState()
  const[selected_content,set_selected_content]=useState()
    useEffect(()=>
    {
        set_selected_content("Home")
    },[])
    
    function ChangeTheSelectedContent(selected_content_name)
    {
        set_selected_content(selected_content_name)
    }
  return (
    <div class='shadow-md w-full fixed'>
       <div class='md:flex justify-between bg-[#131720] py-4 md:px-10 px-7'>
      <div class= "">
        <img src={ciniminilogo} class="h-12" alt=""/>
      </div>
      <div onClick={()=>setOpen(!open)} class='text-3xl absolute right-8 top-8 cursor-pointer md:hidden'>
      <GiHamburgerMenu name={open ? 'close':'menu'}/>
      </div>
      <ul class={`md:flex md:items-center md:pb-0 pb-12 absolute md:static bg-[#131720] md:z-auto z-[-1] left-0 w-full md:w-auto md:pl-0 pl-9 duration-500 ease-in ${open ? 'top-20 ':'top-[-490px]'}`}>
      {
            headers_array.map((item,index)=>
             <div class="xl:ml-8 text-xl md:my-0 xl:my-0 my-7 mr-10" key={index}>
                {
                   selected_content===item.name?
                    <Link onClick={()=>{ChangeTheSelectedContent(item.name)}} class="text-[#cbbb17] hover:text-yellow-100 "to={item.route}>{item.name}</Link>:
                    <Link onClick={()=>{ChangeTheSelectedContent(item.name)}} class="text-sky-600 hover:text-[#cbbb17]"to={item.route}>{item.name}</Link>
                }</div>
            )
        }
        <searchbar class="flex pr-64">
        <div class="w-40">
        <input type="text" class="rounded-full h-10 w-50 bg-[#151f30] pl-4" placeholder="I'm looking for...."></input>
        </div>  
      <button class="text-[#cbbb17]"><FaSearch size={20}/></button>
    </searchbar>
      </ul>
      </div>
    </div>)}
    export default Header