How to align logo and navbar with Tailwind

JavaScript
1

The header of my web page contains a logo and a navbar, in the nav element, I want to align the logo and the navbar with Tailwind in such a way that the logo is on the left and the navbar on the right on sm screens.
I’ve tried flex, items-center, and justify-between on small screens, but it’s not working.
below is what I have done


const Navbar = () => {
  const [showMenu, setShowMenu] = useState(false);
  return (
    <>
    <nav className=' bg-blue-600 flex  items-start justify-end m-0 p-0 w-[100vw] h-[25vh] '>
     <Link to='/' className='hidden block sm:block  '><img src={Frame} alt="" className='w-lg' /></Link> 
      <div className={`${showMenu ? 'hidden' : 'block absolute left-0 top-10  ml-6'} `} >
              <ul className='sm:flex sm:flex-row sm: space-x-5'>
                  <li >
                      <Link to="/" className='text-[30px] text-white font-medium sm:text-lg'>Home</Link>
                    
                  </li>
                  <li>
                      <Link to="/basics" className='text-[30px] text-white font-medium sm:text-lg'>Basics</Link>
                    
                  </li>
                  <li>
                      <Link to="/lesson plan" className='text-[30px] text-white font-medium sm:text-lg'>Lesson Plan</Link>
                      
                  </li>
                  <li>
                      <Link to="/contact" className='text-[30px] text-white font-medium sm:text-lg'>Contact</Link>
                      
                  </li>
              </ul>
      </div>   
  <button className=' block mx-[100px] sm:hidden cursor-pointer m-6 sm:absolute' onClick={ ()=>setShowMenu(!showMenu)}>
    {showMenu ? <FaAlignJustify className='size-10 absolute right-5 top-5' /> : <FaX className='size-10 mr-3 absolute right-5 top-5'/>}
  </button>
   </nav>
    </>
  )
}

export default Navbar