JSFiddle - React, Tailwind, and code Playground

by Scott Guymer

HTML

<div id="wrapper">
  <h1 class="chrome">Fastrack</h1>
  <h3 class="dreams">Automotive</h3>
  <h1 class="vectro"><span class="vectro-body">FASTRACK</span><span class="vectro-red">I</span><span class="vectro-green">I</span><span class="vectro-blue">I</span></h1>
  <div class="street-machine">
  <h1 class="street">FASTRACK</h1>
  <h3 class="machine">Automotive</h3>
  </div>
  <h1 class="victory"><span class="victory-v">F</span>astrack</h1>
  <div class="future-cop">
  <h3 class="future">Future</h3>
  <h1 class="cop">COP</h1>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Mr+Dafoe);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900);
@import url(http://fonts.googleapis.com/css?family=Righteous);
@import url(http://fonts.googleapis.com/css?family=Candal);

@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);

@import url(http://fonts.googleapis.com/css?family=Monoton);


body { background: #000; color: #fff; position: relative;}

.chrome {
  position: relative;
  background-image: -webkit-linear-gradient(#378DBC 0%, #B6E8F1 46%, #ffffff 50%, #32120E 54%, #FFC488 58%, #582C11 90%, #EC9B4E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 4px #f5f5f5;
  font-size: 200px;
  font-family: 'Titillium Web', sans-serif;
  font-style: italic;
  margin: 0;
  line-height: 1;
}

.chrome:before {
  content: 'CHROME';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  background-image: -webkit-linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position:-680px 0;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0;
  padding-right: 300px;
  -webkit-animation-name: chrome_effect;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

.dreams {
  position: absolute;
  margin: 0px;
  font-family: 'Mr Dafoe', cursive;
  font-size: 160px;
  color: #F975F7 ;
  transform:rotate(-15deg);
  -ms-transform:rotate(-15deg); /* IE 9 */
  -webkit-transform:rotate(-15deg); /* Safari and Chrome */
  margin-left: 400px;
  margin-top: -120px;
  -webkit-text-stroke: 1px #f008b7;
  -webkit-filter: drop-shadow(2px 2px 20px #f008b7);
  z-index: 20;
}

.windows .dreams {
  -webkit-text-stroke: 4px #f008b7;
}

.vectro {
  position: relative;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.1px #f1f1f1;
  font-family: 'Righteous',...