Help with CSS

#html #css #beginners #webdev

I am developing landing pages with React and Tailwind CSS.
But whenever I add the Navbar component, the content become overflowed and I have to scroll horizontal and vertical to see all the components. This is my Navbar component.

export default function Navbar() {
  return (
    <>
        <nav className="bg-gray-900 border-gray-200 m-0 shadow-md text-black">
            <div className="flex items-center justify-between m-0 h-[87px] p-0">
                <p className="font-extrabold text-white text-4xl font-inter pl-[22px] m-0">Programador123</p>
                <button data-collapse-toggle="navbar-default" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
                    <span className="sr-only">Open main menu</span>
                    <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15"/>
                    </svg>
                </button>
                <div className="hidden w-full md:block md:w-auto" id="navbar-default">
                    <button type="button" className="text-white bg-transparent pr-[22px] hover:bg-gray-100 border border-none focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 me-2 mb-2">
                        <div className='pr-[22px] m-0'>
                            <svg className = "w-[35px] h-[35px]" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M31.5 0H3.5C1.575 0 0.0175 1.575 0.0175 3.5L0 35L7 28H31.5C33.425 28 35 26.425 35 24.5V3.5C35 1.575 33.425 0 31.5 0ZM25.165 18.725L21 15.4V19.25C21 20.2125 20.2125 21 19.25 21H8.75C7.7875 21 7 20.2125 7 19.25V8.75C7 7.7875 7.7875 7 8.75 7H19.25C20.2125 7 21 7.7875 21 8.75V12.6L25.165 9.275C26.3025 8.365 28 9.17 28 10.64V17.36C28 18.83 26.3025 19.635 25.165 18.725Z" fill="white"/>
                            </svg>
                        </div>      
                        <p className="font-extrabold text-white text-[32px] font-inter">Book Call</p>
                    </button>
                </div>
            </div>
        </nav>
    </>
  )
}

Looking hearing from all of you.
Thank you.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.