JSFiddle - React, Tailwind, and code Playground

by cadence96

HTML

<div id="profile">
           <img src="http://www.flashcoo.com/animal/rabbit/images/%5Bwallcoo_com%5D_Lovely_rabbit_Picture_da033008s.jpg" />
           <div>
             <h3><a>Text 1</a></h3>
             <h4><b>Text 2</b></h4>
             <ul class="social">
               <li class="twitter"><a></a></li>
               <li class="facebook"><a></a></li>
               <li class="pinterest"><a></a></li>
             </ul>
           </div>
         </div>

CSS

.social{width:200px; height:70px; background:url(http://www.angeloalpaca.railsperu.com/test/assets/images/global.png) no-repeat 0 0px}
.social li{float:left; margin-right:3px; margin-top:25px}
.social li a{width:25px; height:20px; display:block; background:url(http://www.angeloalpaca.railsperu.com/test/assets/images/global.png) no-repeat 0 -3px;
-moz-transition:none; -webkit-transition:none; transition:none}

.social li:first-of-type{margin-left:97px}

.social li.facebook a{width:20px; background-position:-233px -4px}
.social li.twitter a{background-position:-205px -4px}
.social li.rss a{background-position:-107px -3px}
.social li.pinterest a{background-position:-255px -4px}
.social li.soundcloud a{background-position:0 -3px}
#profile{width:410px; height:420px; margin:0 auto; padding:25px 0 0 44px; 
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;
background:url(http://www.angeloalpaca.railsperu.com/test/assets/images/backgrounds/polaroid-full.png) no-repeat;
height:440px\9;
background:url(http://www.angeloalpaca.railsperu.com/test/assets/images/backgrounds/polaroid-full.png) no-repeat transparent\9}
#profile{
-moz-transform:rotate(-5deg); webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(-5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1
}
#profile img{width:329px; height:294px}
 #profile{position:relative}
 #profile .social{/*position:absolute; top:85%; right:11px;*/ padding-top:10px; float:right; margin-right:11px}
 .category-list{width:50%; float:left}
 .category-list:first-of-type{margin-top:16px}