JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<script src="https://fonts.googleapis.com/css?family=Megrim|Monoton|Poiret+One|Righteous"></script>
<script src="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Megrim|Monoton|Poiret+One|Righteous&quot; rel=&quot;stylesheet&quot;&gt;"></script>

  <link href="https://fonts.googleapis.com/css?family=Megrim|Monoton|Poiret+One|Righteous" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<h1>
  <span class="main">C</span><span class="sub">hicago</span><span class="main">S</span><span class="sub">ignage &</span><span class="main">G</span><span class="sub">raphics</span>
</h1>

SCSS

h1{
  .main{
    font-family:'Righteous';
    font-size:35px;
    display:inline-block;
    font-weight:800;
  }
  .sub{
    font-family:'Poiret One';
    font-size:0;
    transition-duration:.5s
       display:inline-block;
  }
  &:hover{
    .sub{
      font-size:25px;
      margin-right:10px;
      
    }
  }
}