JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<div id="container">
    <div id="button">
        <div id="buttText">Button</div>
    </div>
</div>

CSS

body       { background-color:#057D9F; }
#container { }
#button
{
            font-family: 'Poiret One', cursive;
            color:#f2f2f2;
            font-size:100%;
            border:3px solid #2C3D82;
            border-radius:10px;
            -webkit-box-shadow: 11px 7px 18px 0px rgba(50, 50, 50, 0.45);
            -moz-box-shadow:    11px 7px 18px 0px rgba(50, 50, 50, 0.45);
            box-shadow:         11px 7px 18px 0px rgba(50, 50, 50, 0.45);
            text-align:center;
            width: 50%;
            height: 50%;
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            height:5em;
            width:12em;
            background-color:#6F83D6;
}
#buttText{
             width: 50%;
             height: 50%;
             overflow: auto;
             margin: auto;
             position: absolute;
             top: 0; left: 0; bottom: 0; right: 0;
             font-size:2em;
             font-weight:500;      
}