Divide screen evenly horizontally with tailwind-CodePudding

Hey guys so I am working with tailwind css and am trying to create a layout with 3 evenly dividided divs. However I want them to fit on the screen without scrolling, so that everything fits neatly on "one page".

Status quo:

Status quo code:

(
    <>
      <Header></Header>
      <div className="flex justify-center">
        <div className="w-2/3 my-10 h-screen">
          <div className="bg-gray-400 h-1/3">Image
            {/* <Image src="/../public/rolex.jpg" layout="fill" width={200} height={200} alt=""></Image> */}
          </div>
          <div className="bg-gray-500 h-1/3">Timer</div>
          <div className="bg-gray-600 h-1/3">Stop</div>
        </div>
      </div>
    </>
  );

Thank you for your help it is much appreciated!

CodePudding user response：

You have a margin on the y-axis here: <div className="w-2/3 my-10 h-screen"> ("my-10"). Remove it and everything is fine.