JSFiddle - React, Tailwind, and code Playground

HTML

<div id="phone-outer">
    <div id="phone-inner">
                 
    </div>
</div>

CSS

body{margin: 2000px}
#phone-outer {

    border: 1px solid #FFFFFF;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;

    box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;

    height: 500px;
    width: 400px;
    margin: 0 auto;


    background-image: linear-gradient(right, #111 11%, #333 56%);
    background-image: -o-linear-gradient(right, #111 11%, #333 56%);
    background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
    background-image: -webkit-linear-gradient(right, #111 11%, #333 56%);
    background-image: -ms-linear-gradient(right, #111 11%, #333 56%);
    background-image: gradient(right, #111 11%, #333 56%);
}

#phone-inner {
	margin:0 auto;
	background-color:#FFF;
	width:360px;
	height:460px;	
}