JSFiddle - React, Tailwind, and code Playground

HTML

<div id="white">
<div id="view1">
	<div id="text1">
		View 1
	</div>
</div>
<div id="view2">
	<div id="round">
		<div id="text2">
			VIEW 2
		</div>
	</div>
</div>
</div>

CSS

#white {
            background-color: white;
        }
        
        #view1 {
            text-align: center;
            height: 100px;
            width: 500px;
            border: 2px solid;
        }
        
        #view2 {
            text-align: center;
            height: 300px;
            width: 500px;
            border: 2px solid;
        }
        
        #text1,
        #text2 {
            padding-top: 42px;
        }
        
        #round {
            background-color: green;
            width: 500px;
            margin: 0 0px;
            height: inherit;
            border-radius: 70%/100px 100px 0 0;
        }