JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div style="height:200px"></div>



<ul>
<li style="text-align:left;">
<span class="big">12.99€</span><br/>
<span>Print magazine</span>
</li> 
    
<li style="text-align:left;">
<span class="big">21/29</span><br/>
<span>Dimension ( cm )</span>
</li> 
    
<li style="text-align:left;">
<span class="big">96</span><br/>
<span>Number of pages</span>
</li> 

    
    
<li style="text-align:left;">
<span class="big">02/03</span><br/>
<span>Shipping France<br/>
working days</span>
</li> 
    
<li style="text-align:left;">
<span class="big">10/15</span><br/>
<span>Shipping Europe<br/>
working days</span>
</li> 
    
<li style="text-align:left;">
<span class="big">15/20</span><br/>
<span>Shipping International<br/>
working days</span>
</li>  
</ul>   









<div style="height:200px"></div>

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:1250px; width:100%;  margin: 0px auto; border:0px 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:#fff; text-align:center; }
span.big  { font-size:5em;  line-height:auto;}
}












@media screen and (max-width:1280px) { 
span.bodyfont { font-size:0.9em; }
ul { max-width:950px; width:100%;  margin: 0px auto; border:0px 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; }
span.big  { font-size:4em;  line-height:auto;}
}








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








@media screen and (max-width:840px) { 
span.bodyfont { font-size:0.7em; }
ul { max-width:635px; width:100%;  margin: 0px auto; border:0px solid red}
ul li { float: left; margin:0px auto; }
li {min-width:285px; max-width:25px; width:100%; height:180px; padding:15px; background:#fff; text-align:center;}
span.big  { font-size:3em; }
}

 






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


@media screen and...