I want x divs under each other with some height(e.g 1/2 of screenheight) but when I do that, the divs get 1/x height because it tries to fill the screen with x divs so it makes it smaller but I dont want that.

Code I have in React using Tailwind:

import React from 'react';

function YourComponent() {
    return (
        <div className='flex flex-col justify-center items-center bg-white border border-black h-screen'>

            <div className="w-full h-1/2 border">
                Div 1
            </div>
            <div className="w-full h-1/2 border">
                Div 2
            </div>
            <div className="w-full h-1/2 border">
                Div 3
            </div>
            <div className="w-full h-1/2 border">
                Div 4
            </div>
            <div className="w-full h-1/2 border">
                Div 5
            </div>

        </div>
    );
}

export default YourComponent;