JSFiddle - React, Tailwind, and code Playground

by morunas

HTML

<div class="sq separator">
     <h2 class="title">Colors</h2>

    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
    <div id="c4"></div>
</div>
<div class="separator fonts">
     <h2 class="title">Fonts (Open Sans sans-serif)</h2>

    <p class="ft light">Donec sodales mi metus, pretium maximus dolor placerat ut. Cras eget leo turpis.</p>
    <p class="ft">Donec sodales mi metus, pretium maximus dolor placerat ut. Cras eget leo turpis.</p>
    <p class="ft"><em>Donec sodales mi metus, pretium maximus dolor placerat ut. Cras eget leo turpis.</em>

    </p>
    <p class="ft"><strong>Donec sodales mi metus, pretium maximus dolor placerat ut. Cras eget leo turpis.</strong>

    </p>
</div>
<div class="separator fonts">
     <h2 class="title">Headings</h2>

     <h1 class="">Heading 1</h1>

     <h2 class="">Heading 2</h2>

     <h3 class="">Heading 3</h3>

     <h4 class="">Heading 4</h4>

</div>
<div class="separator fonts">
     <h2 class="title">Paragraph</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt aliquet nisl, id laoreet augue. Maecenas congue vulputate fermentum. Vivamus tincidunt ex non hendrerit maximus. Nullam porta vestibulum turpis, ut tempus nulla euismod eu. <strong>Pellentesque dapibus mi ut ligula imperdiet, congue pretium ex accumsan.</strong> Sed interdum facilisis leo, eget consectetur neque faucibus id. Suspendisse dapibus urna et laoreet semper.</p>
</div>
<div class="separator fonts">
     <h2 class="title">Paragraph</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt aliquet nisl, id laoreet augue. Maecenas congue vulputate fermentum. Vivamus tincidunt ex non hendrerit maximus. Nullam porta vestibulum turpis, ut tempus nulla euismod eu.</p>
    <hr/>
    <p>Pellentesque dapibus mi ut ligula imperdiet, congue pretium ex accumsan. Sed interdum facilisis leo, eget consectetur neque faucibus id. Suspendisse dapibus urna et laoreet...

SCSS

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTSUUniRZcd_wq8DYmIfsw2A.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTeXREeHhJi4GEUJI9ob_ak4.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTY0Uz7fbu6RM5MPetubMKio.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTfzy0yu4vcvNhe7QLuoE8rU.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTc9-ZSaZ3mOOsU9E1f6DGWc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTYZI5FoslwusAsZHK_V0XCI.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}
/* latin-ext */
@font-face {
 ...