JSFiddle - React, Tailwind, and code Playground

HTML

<header>Happy Holidays</header>
<div class="spon"> <span>Let me Count The Holiday Cheers<strong>From Me</strong></span>

</div>
<div class="content-wrapper"> <a href="#" class="row-link">
            <div class="row">
                <div class="number-wrapper">
                   <div class="number">1
                   </div>
                </div>
                <div class="text-container">
                    <div class="title">Santa</div>
                    <div class="desc">Santa is Awesome</div>                    
         <div class="host">northpole.com</div>
                </div>
                <div class="more-wrapper">
                    <div class="more">
                        more about Santa
                    </div>
                </div>
           </div><!-- end row -->
       </a> 
    <!-- end block-level row-link -->
</div>
<!-- end content wrapper -->

CSS

*|* {
    font-family:'Source Sans Pro', sans-serif;
}
*|* {
    box-shadow:0px 0px 1px rgba(255, 0, 0, .1);
}
header {
    text-align: center;
    height:70px;
    background: rgb(128, 167, 206);
    line-height:70px;
    color:#d7d7d7;
}
.spon {
    width:960px;
    margin:3px auto;
    text-align: right;
}
.row {
    width:960px;
    margin:3px auto;
    display:block;
    height:110px;
}
a {
    text-decoration: none;
}
.number-wrapper {
    display:block;
    height:100px;
    width:120px;
    background: #e8e8e8;
    float:left;
}
.number {
    display:inline;
}
.text-container {
    display:block;
    width:600px;
    height:100px;
    background: #9c9c9c;
    float:left;
}
.more-wrapper {
    display:inline-block;
    height:100px;
    width:150px;
    background: #000;
}
.title {
    font-size:30px;
    color:red
}
.desc {
    font-size:18px;
    color:white;
}
.host {
    font-size:10px;
    color:green;

}