JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<div class="uno-horizontal">
    <div class="due-horizontal"> 
        <div class="font-horizontal"></div>
    </div>
</div>

CSS

div {
    border: solid 1px rgba(255, 152, 11, 1);
    ;
    width:600px;
    height:150px;
}
.uno-horizontal {
    font-family: 'Arimo', sans-serif;
    text-align:center;
    text-shadow: 2px 0 0 rgba(255, 152, 11, 1), -2px 0 0 rgba(255, 152, 11, 1), 0 2px 0 rgba(255, 152, 11, 1), 0 -2px 0 rgba(255, 152, 11, 1), 1px 1px rgba(255, 152, 11, 1), -1px -1px 0 rgba(255, 152, 11, 1), 1px -1px 0 rgba(255, 152, 11, 1), -1px 1px 0 rgba(255, 152, 11, 1);
    font-weight:900;
    color:white;
    font-size:40px;
    position:relative;
    background-image: url("http://i.imgur.com/V0UeSpc.png");
    background-size: 580px;
    background-repeat: no-repeat;
    background-position: 80px -30px;
}
.due-horizontal {
    position: absolute;
    top: 0px;
    background-color:rgba(255, 152, 11, 0.7);
}
a {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
}


.font-horizontal {
    background-image: url("http://i.imgur.com/LaYGRsE.png");
    background-repeat: no-repeat;
    background-size:500px ;
    background-position:20px 30px ;
}