JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<ul> 
<li id="borderinfo1"><br/><br/>
<span class="bodyfont">PAGES</span>
<br/><br/><br/><br/>
<span class="big">96</span>
</li>
    
    
    
    

<li id="borderinfo2"><br/><br/>
<span class="bodyfont">DIMENSIONS</span>
<br/><br/><br/><br/>
<span class="big">210 / 297</span>
<span>mm</span>
</li>

    
<li id="borderinfo3"><br/><br/>
<span class="bodyfont">TEXTS</span>
<br/><br/><br/><br/>
<span class="big">Fr / En</span>
</li>
    
    
<li id="borderinfo4" class="second"><br/><br/>
<span class="bodyfont">SHIPPING FRANCE<br/>working days</span>
<br/><br/><br/><br/><br/>
<span class="big">02/03</span>
</li>
    
    
<li id="borderinfo5" class="second"><br/><br/>
<span class="bodyfont">SHIPPING EUROPE<br/>working days</span>
<br/><br/><br/><br/><br/>
<span class="big">10/15</span>
</li>
    
    
<li id="borderinfo6" class="second"><br/><br/>
<span class="bodyfont">SHIPPING INTERNATIONNAL<br/>working days</span>
<br/><br/><br/><br/><br/>
<span class="big">15/20</span>
</li>


</ul>

CSS

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

* { padding:0; margin: 0; }
body { font-family:'Open sans'; font-weight:300;  }
li  { list-style:none; }



@media screen and (min-width:1280px) {
span.bodyfont { font-size:1em;}
ul { max-width:1280px; width:100%;  margin: 0px auto; border:2px solid red}
ul li { float: left; margin:0px auto; } 
li {min-width:385px; max-width:385px; width:100%; height:220px; padding:15px; margin:0px; background:#eee; text-align:center; }
li.second { padding-top:50px; }
span.big  { font-size:5em;  line-height:auto;}

#borderinfo1 {border-top:0px solid #eee; border-right:1px solid #eee; border-bottom:1px solid #eee; border-left:0px solid #eee;}     
#borderinfo2 {border-top:0px solid #eee; border-right:1px solid #eee; border-bottom:1px solid #eee; border-left:0px solid #eee;}       
#borderinfo3 {border-top:0px solid #eee; border-right:0px solid #eee; border-bottom:1px solid #eee; border-left:0px solid #eee;}     
#borderinfo4 {border-top:0px solid #eee; border-right:1px solid #eee; border-bottom:0px solid #eee; border-left:0px solid #eee;}     
#borderinfo5 {border-top:0px solid #eee; border-right:1px solid #eee; border-bottom:0px solid #eee; border-left:0px solid #eee;}     
#borderinfo6 {border-top:0px solid #eee; border-right:0px solid #eee; border-bottom:0px solid #eee; border-left:0px solid #eee;}          
}












@media screen and (max-width:1280px) { 
span.bodyfont { font-size:0.9em; }
ul { max-width:950px; width:100%;  margin: 0px auto; border:2px solid red}
ul li { float: left; margin:0px auto; }  
li {min-width:285px; max-width:285px; width:100%; height:220px;  padding:15px; background:#fff; text-align:center; }
li.second { padding-top:50px; }
span.big  { font-size:4em;  line-height:auto;}

#borderinfo1 {border-top:0px solid #eee; border-right:1px solid #eee; border-bottom:1px solid #eee; border-left:0px solid #eee;}     
#borderinfo2 {border-top:0px solid #eee; border-right:1px solid #eee;...