JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="post">
    <img src="http://allstar.kg/uploads/posts/2011-03/1300040373_big3.jpg" alt="" class="bg">
    <div class="logo"></div>
    <p class="last-score">
        Heat <span>89</span>
        @
        Hornets <span>85</span>
        <span class="mvp">Lebron : 28 pts</span>
    </p>
    <div class="season-standing">
        49-19
        <span>W1</span>
    </div>
    <div class="coming-next">
        Coming next <span>@ New York Knicks</span> Mon 03/01 7:30 pm
    </div>
    <div class="season-stats">
        <span>PPG 97,3 <span>21st</span></span><span>PPG 97,3 <span>21st</span></span><span>PPG 97,3 <span>21st</span></span>
    </div>
</div>

CSS

.post {font-family:arial; padding:15px 0 0; width:100%; max-width:900px; overflow:hidden; min-height:133px; border:1px solid #000; background:#6EAE62; position:relative;}

.logo {position:absolute; top:15px; left:15px; z-index:1; height:110px; width:110px; background:url(http://3.bp.blogspot.com/_WnmKrbXFFyU/S-xLCZtv3qI/AAAAAAAAABc/VzHPl04adew/s320/miami_heat_logo.jpg) no-repeat 50% 50%; border:5px solid firebrick; -moz-border-radius:60px; -moz-box-shadow: 0 0 10px #000 ;}
.bg {position:absolute; top:-40%; left:0; width:100%;}

.last-score {font-size:26px; font-weight:bold; text-align:center; text-transform:uppercase; color:#FFF; text-align:center; text-shadow: #000 0 0 2px; position:absolute; left:0; width:100%;
}
.last-score span {color:firebrick;}
.last-score .mvp {font-size:18px; text-transform:none; display:block; color:#fff;}

.season-standing {font-size:30px; font-weight:bold; text-transform:uppercase; color:#FFF; position:absolute; right:20px; top:10px; text-shadow: #000 0 0 10px;}
.season-standing span {display:block; font-size:20px; color:firebrick; text-align:right;}

.coming-next {background:#FFF; width:98%; padding-right:2%; font-weight:bold; text-align:right; text-transform:uppercase; color:firebrick; font-size:16px; line-height:30px; position:absolute; bottom:30px; }
.coming-next span {color:#000;}

.season-stats {float:right; background:#000; width:98%; padding-right:2%; font-size:16px; line-height:30px; font-weight:bold; text-align:right; text-transform:uppercase; color:#FFF; position:absolute; bottom:0;}
.season-stats span {padding:0 0 0 20px;}
.season-stats span span {color:firebrick; padding:0; float:none; font-size:12px}