JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">    
    <div class="content">
        <div class="header"></div>
        
    </div>
</div>

CSS

* {
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    html {
        height: 100%;
        border: 5px solid red;
        margin-bottom: -16px;
    }
    body {
        background-color: lightblue;
        height: 100%;
        border: 5px solid blue;
        margin: 0 0 -16px 0;
    }
    .wrapper {
        display: block;
        position: relative;
        background-color: green;
        width: 605px;
        margin: auto;
        height: 100%
    }
    .header {
        position:absolute;
        top:0;
        left:0;
        background-color: blue;
        height: 120px;
        width: 450px;
        text-align: center;
        padding: 5px 0px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .content {
        display: inline-block;
        background-color: red;
        padding: 10px 5px;
        width: 450px;
        height: 100%;
        padding-top:120px;
    }