Responsive Header using tailwind css and next.js

I am trying to create a responsive header for my website where if the screen reaches a certain size, then the header will be represented as a hamburger menu with links to redirect the user to different pages.

import Link from 'next/link'export default function Header(){  return (<header className='bg-white border-b flex justify-between p-4'><div className="flex items-center gap-6"><Link href={'/'}>FashionFinder </Link><nav className='flex gap-4'><Link href={'/about'}>About</Link><Link href={'/contact'}>Contact</Link><Link href={'/albums'}>Albums</Link></nav></div><nav className='flex items-center gap-4'><Link href={'/login'}>Sign In</Link><Link href={'/register'}>Create Account</Link></nav></header>  )}