JSFiddle - React, Tailwind, and code Playground

by Elena Lembersky

HTML

<div class="wrapper">
<h2 class="fs-36 t-upper marginB-20 t-center">What is Lorem Ipsum?</h2>
<div class="pdn-20 brd-clr-cccccc marginB-20 t-just">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div> 
<p class="fs-16 lh-200 marginB-10 fw-300">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the <span class="clr-cc00cc hvr-under fw-500">industry's standard dummy</span> text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="t-upper fw-700">It was popularised</span> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="pdn-20">
<p class="t-upper t-center">In the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="line-cccccc marginB-20"></div>
<img class="imgcenter width-80 marginB-10" alt="Norton has a variety of resources to help you protect yourself from malware" src="//d15o9qq6jqrrp9.cloudfront.net/assets/images/general/35341/Norton_HomePage2.jpg">

<p class="fs-16 lh-30 marginB-10">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,...

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
body{
  font-family: 'Roboto', sans-serif;  
}


/****FONT****/
$fs-grid: 14,16,21,36;
@each $i in $fs-grid {
  .fs-#{$i}{
    font-size: #{$i}px;
  }
}

$lh-grid: 100,120,140,160,180,200,400;
@each $i in $lh-grid {
  .lh-#{$i}{
    line-height: #{$i/100} !important;
  }
}


$fw-grid: 300,400,500,700;
@each $i in $fw-grid {
  .fw-#{$i}{
    font-weight: #{$i} !important;
  }
}

/****BLOCK****/
$margin-grid: 10,20,30,40;
@each $i in $margin-grid {
  .marginB-#{$i}{
    margin-bottom: #{$i}px !important;
  }
}

@each $i in $margin-grid {
  .marginT-#{$i}{
    margin-top: #{$i}px !important;
  }
}

$padding-grid: 10,20,30,40;
@each $i in $padding-grid {
  .pdn-#{$i}{
    padding: #{$i}px !important;
  }
}

$width-grid: 10,20,30,40,50,80;
@each $i in $width-grid {
  .width-#{$i}{
     $i : $i+'%';
    width: #{$i} !important;
  }
}


$line-color-grid: cc0000,cc00cc,cccccc;
@each $i in $line-color-grid {  
  .line-#{$i}{ 
    $i : '#'+$i;    
    clear:both;
    display:block;
    width: 100%;
    border-bottom: 1px solid #{$i};    
  }
}


$brd-color-grid: cc0000,cc00cc,cccccc;
@each $i in $brd-color-grid {  
  .brd-clr-#{$i}{ 
    $i : '#'+$i;
    clear:both;
    display:block;
    width: 100%;
    border: 1px solid #{$i};    
  }
}


/***COLORS***/
$color-grid: cc0000,cc00cc;
@each $i in $color-grid {  
  .clr-#{$i}{ 
    $i : '#'+$i;
    color: #{$i} !important;
  }
}









html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
   ...