JSFiddle - React, Tailwind, and code Playground

by pascal08

HTML

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,700' rel='stylesheet' type='text/css'>
<div class="card bronze0">
    <img src="http://wefut.com/assets/images/fut14/bronze0_test.png" alt="" class="background" />
    <img src="http://wefut.com/assets/images/fut14/playeravatars/160774.png" alt="" class="playeravatar" /> <span class="rating">82</span>
    <a href="http://wefut.com/club/567"><img src="http://wefut.com/assets/images/fut14/clubbadges/567.png" alt="" class="clubcrest" /></a>
    <a href="http://wefut.com/nation/54"><img src="http://wefut.com/assets/images/nation_flag/54.jpg" alt="" class="nationflag" /></a>
    <span class="position">ST</span>
    <div class="name"> 
        <span class="marquee">FRED</span>
    </div>
    <div class="chemstyle-container">
        <div class="chemstyle">
            <div class="s-5_bl"></div>
            <span>SCHERPSCHUTTER</span>
        </div>
    </div>
    <div class="attributes keeper"> <span class="pace">64</span>
        <span class="shooting">80</span>
        <span class="passing">69</span>
        <span class="dribbling">76</span>
        <span class="defending">49</span>
        <span class="heading">82</span>
    </div>
</div>

CSS

img {
   border: none;
}

.s-0_bl, .s-0_go, .s-0_si, .s-0_br, .s-0_wh, .s-1_wh, .s-1_bl, .s-1_go, .s-1_si, .s-1_br, .s-4_bl, .s-4_go, .s-4_si, .s-4_br, .s-4_wh, .s-5_bl, .s-5_go, .s-5_si, .s-5_br, .s-5_wh, .s-3_bl, .s-2_bl, .s-3_go, .s-2_go, .s-3_si, .s-2_si, .s-3_br, .s-2_br, .s-3_wh, .s-2_wh{
	background: url(http://puu.sh/4Kdgz.png) no-repeat;
}

.s-0_bl{
	background-position: 0 0;
	width: 30px;
	height: 30px;
}

.s-0_go{
	background-position: -30px 0;
	width: 30px;
	height: 30px;
}

.s-0_si{
	background-position: -60px 0;
	width: 30px;
	height: 30px;
}

.s-0_br{
	background-position: -90px 0;
	width: 30px;
	height: 30px;
}

.s-0_wh{
	background-position: -120px 0;
	width: 30px;
	height: 30px;
}

.s-1_wh{
	background-position: -121px -30px ;
	width: 30px;
	height: 30px;
}

.s-1_bl{
	background-position: -1px -30px ;
	width: 30px;
	height: 30px;
}

.s-1_go{
	background-position: -30px -30px ;
	width: 30px;
	height: 30px;
}

.s-1_si{
	background-position: -60px -30px ;
	width: 30px;
	height: 30px;
}

.s-1_br{
	background-position: -90px -30px ;
	width: 30px;
	height: 30px;
}

.s-4_bl{
	background-position: 0 -60px ;
	width: 30px;
	height: 30px;
}

.s-4_go{
	background-position: -30px -60px ;
	width: 30px;
	height: 30px;
}

.s-4_si{
	background-position: -60px -60px ;
	width: 30px;
	height: 30px;
}

.s-4_br{
	background-position: -90px -60px ;
	width: 30px;
	height: 30px;
}

.s-4_wh{
	background-position: -120px -60px ;
	width: 30px;
	height: 30px;
}

.s-5_bl{
	background-position: 0 -90px ;
	width: 30px;
	height: 30px;
}

.s-5_go{
	background-position: -30px -90px ;
	width: 30px;
	height: 30px;
}

.s-5_si{
	background-position: -60px -90px ;
	width: 30px;
	height: 30px;
}

.s-5_br{
	background-position: -90px -90px ;
	width: 30px;
	height: 30px;
}

.s-5_wh{
	background-position: -120px -90px ;
	width: 30px;
	height: 30px;
}

.s-3_bl{
	background-position: 0 -120px ;
	width: 30px;
	height: 30px;
}

.s-2_bl{
	background-position: 0 -150px ;
	width: 30px;
	height:...