JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<script src="https://rawgit.com/freqdec/slabText/master/js/jquery.slabtext.js"></script>
<h1>
<span class="slabtext mine">I invented the</span>
<span class="slabtext mine">universe</span>
<span class="slabtext mine">and all I got was</span>
<span class="slabtext mine">this lousy</span>
<span class="slabtext mine">apple pie</span>
</h1>

CSS

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

body {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  text-transform: uppercase;
  margin: 2em;
}

.slabtexted .slabtext {
  display: -moz-inline-box;
  display: inline-block;
  white-space: nowrap;
}

.slabtextinactive .slabtext {
  display: inline;
  white-space: normal;
  font-size: 1em !important;
  letter-spacing: inherit !important;
  word-spacing: inherit !important;
  *letter-spacing: 0 !important;
  *word-spacing: 0 !important;
}

.slabtextdone .slabtext {
  display: block;
  line-height: 0.7em;
}

.slabtextdone .slabtext:first-child {
  margin-bottom: -3px;
}

.slabtextdone .slabtext:nth-child(2) {
  margin-bottom: 4px;
}

.slabtextdone .slabtext:nth-child(3) {
  margin-bottom: -2px;
}

.slabtextdone .slabtext:nth-child(4) {
  margin-bottom: -2px;
}

.slabtextdone .slabtext {
  padding-bottom: 10px;
}

JavaScript

$('h1').slabText();