JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<!-- This box can do anithyng -->
<div class="perfect-box">
    <h1>Clean content box Example</h1>
    <p>Rem ipsum dolor sit amet, consectetur adipisicing elit. Sunt asperiores sequi architecto maiores dolorum dignissimos temporibus! Saepe corporis iure deleniti quo voluptatem dolor eligendi voluptas ex quas nesciunt asperiores illo. ex quas nesciunt asperiores illo.</p>
    <!-- <a href="#" class="btn-left">Read more</a> -->
    <a href="#" class="btn-right">Read more</a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);

body{
    background-color:#555;
    font-family: 'Open Sans', sans-serif;
}
.perfect-box{
    background-color: white;
    width:50%;
    margin:0 auto;
    padding:30px;
}

.perfect-box h1{
    margin-top:0;
    color:#111;
    font-weight: 500;
}

.perfect-box p{
    line-height:30px;
    vertical-align:middle;
    letter-spacing: 0.3px;
}
.perfect-box button,
.perfect-box a{
    border:none;
    background-color:#4679BD;
    color:#fff;
    padding:10px 15px;
    font-size:16px;
    text-decoration:none;
    font-weight:300;
}
.btn-left{
    float:left;
}
.btn-right{
    float:right;
}
.perfect-box:after{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}