JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
             <div id="up">
                    
            </div>
            <div id="logo">
                <div id="logobody"></div>    
            </div>
            <div id="down">
                    
            </div>
           
    </div>

CSS

#page{
        margin:30px auto;
        width:500px;
        height:auto;
        border-radius:10px;
        border:2px red thin;
        background:red;
        overflow:hidden;
    }
    #logo{
       float:right;
        width:100px;
        height:70px;
        border-radius:10px;
        background:white;
        margin-top:-70px;
        margin-right:10px;
    }
    #up{
       
        width:80%;
        height:60px;
        border-radius-top:10px;
        background:gray;
        
    }
    #down{
        margin-top:-0px;
        margin-right:-10px;
        width:100%;
        height:60px;
        border-radius: 0px 10px 10px 10px;
        background:gray;
        
    }
    
    #logobody{
        border:2px blue solid;
        margin :auto;
        width:85px;
        height:50px;
        margin-top:10px;
        margin-right:0px;
        border-radius:7px;
    }