JSFiddle - React, Tailwind, and code Playground

Jennifer Peerin (Now with Glitch!)

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
    <h2 class="line bottom">Jennifer</h2>
    <h1 class="">Building Up</h1>
    <h2 class="line top">Perrin</h2>
    
    <p class="slogan glitch">
        <i class="fa fa-code"></i>
        Coding Outta Control
        <i class="fa fa-code"></i>
    </p>
</div>

CSS

@import url("http://fonts.googleapis.com/css?family=Holtwood+One+SC|Source+Code+Pro|Abel");

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: "Abel", Courier, monospace;
    text-transform: uppercase;
    color: #fa4b23;
    background: #222;
    overflow: hidden;
}

.container {
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-family: "Holtwood One SC", Arial, sans-serif;
    font-size: 5em;
    line-height: 1em;
}

h3 {
    font-family: "Source Code Pro", Courier, monospace;
    font-size: 2em;
}

.line {
    display: block;
    overflow-y: hidden;
    height: 90px;
    color: #fff;
}

.line.bottom {
    line-height: 1.7em;
    border-bottom: 3px solid white;
}
.line.top {
    line-height: .5em;
    border-top: 3px solid white;
}

p {
    margin: 0;
    padding: 0;
}
.slogan {
    font-size: 3em;
    font-family: "Abel", Arial, sans-serif;
}
.slogan .fa {
    padding: 0 .5em;
    font-size: .75em;
}
.glitch {
    animation: glitch-1 1s infinite linear;
}

@keyframes glitch-1 {
  0%, 2%, 5%, 42%, 45%, 72%, 75%, 100% {opacity: 1; transform: scaleX(1) scaleY(1);}  
  3% {opacity: .8; transform: scaleY(2);}
  43% {opacity: .8; transform: rotate(1deg) scaleX(1.3);}
  73% {opacity: 8; transform: rotate(5deg) scale(2);}
}