JSFiddle - React, Tailwind, and code Playground

by Vanessa RC

HTML

<div class='headers'>
    <h1>
      He taught me a code. To survive.  
    </h1>
    <h2>
      He taught me a code. To survive.  
    </h2>
    <h3>
      He taught me a code. To survive.  
    </h3>
    <h4>
      He taught me a code. To survive.  
    </h4>
    <h5>
      He taught me a code. To survive.  
    </h5>
    <h6>
      He taught me a code. To survive.  
    </h6>
</div>
 <div>
  <p class='paragraph-summary'>
    I have a dark side, too. I like seafood. I'm doing mental jumping jacks. I'm really more an apartment person. I'm generally confused most of the time.

I'm a sociopath; there's not much he can do for me. God created pudding, and then he rested. I'm really more an apartment person. Under normal circumstances, I'd take that as a compliment.
  </p>
  </div>
  <br/>
  <div>
  <p class='paragraph-long-reading'>
   Finding a needle in a haystack isn't hard when every straw is computerized. I have a dark side, too. Rorschach would say you have a hard time relating to others. I love Halloween. The one time of year when everyone wears a mask … not just me.

I'm generally confused most of the time. Like a sloth. I can do that. I'm really more an apartment person. I am not a killer. I like seafood.

Pretend. You pretend the feelings are there, for the world, for the people around you. Who knows? Maybe one day they will be. I am not a killer. I'm Dexter, and I'm not sure what I am. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client.

Tell him time is of the essence. I love Halloween. The one time of year when everyone wears a mask … not just me. I think he's got a crush on you, Dex! I'm doing mental jumping jacks. He taught me a code. To survive.

I am not a killer. I like seafood. Oh I beg to differ, I think we have a lot to discuss. After all, you are a client. I'm real proud of you for coming, bro. I know you hate funerals.
  </p>
  </div>
  <br/>
  <div>
  <p class='paragraph-final-conclusion'>
  Rorschach would say...

SCSS

/* Importing the fonts here, 
   if you wanted to change the font combination, 
   they should be added here. 
   */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300);

/* Defining the primary and second font here */

$primary-font: 'Roboto', 'Arial', sans-serif;
$secondary-font: 'Roboto Slab', 'Arial', sans-serif;

*{
 text-rendering: optimizeLegibility;
}

html {
  font: 100%/1.5;
}

a, 
a:visited {
  text-decoration: underline;
}

a { 
  text-decoration: none;
}

a:active { 
}

a:focus {
}

body, 
input,
button {
  -webkit-font-smoothing: antialised;
  -moz-osx-font-smoothing: grayscale;
}

.headers {
  font-family: $primary-font;
}

p {
  font-family: $secondary-font;
}

h1 {
  font-size: 2em; /* 2*16 = 32 */
}

h2 {
  opacity: 0.8;
  font-size: 1.5em; /* 1.5*16 = 24 */
}

h3 {
  opacity: 0.6;
  font-size: 1.17em; /* 1.17*16 = 18.72 */
}

h4 {
  opacity: 0.4;
  font-size: 1em; /* 1*16 = 16 */
}

h5 {
  font-weight: 400;
  opacity: 0.8;
  font-size: 0.83em; /* 0.83*16 = 13.28 */
}

h6 {
  font-weight: 300;
  opacity: 0.8;
  font-size: 0.75em; /* 0.75*16 = 12 */
}

p {
  word-break: break-all;
  
  /*non standard for webkit */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; 
}

.paragraph-summary {
  margin: 0 0 1em;
  font-size: 90%;
  line-height: 2.4;
  font-weight: bold;
}

.paragraph-long-reading {
  font-size: 85%;
  line-height: 2.7;
  font-weight: 400;
}

.paragraph-final-conclusion {
  font-size: 60%;
  line-height: 1.7;
  font-weight: 200;
}

JavaScript

Grid 
Typography 
Buttons 
Images 
Galleries 
Top navs 
Footers 
Forms 
Dropdowns
Page loaders
lists