JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<header class="main-header">
<h1 class="name">
<span class="first">Developer</span> <span class="amp">&amp;</span> <span class="second">Designer</span>
</h1>
</header>

CSS

.main-header{
    height: 450px;
    background: #121212;
}
.name{
    font-family: Georgia;
    color: white;
    font-weight: normal;
    text-align:center;
    padding-top: 2em;
    font-size: 5em;
    text-transform: uppercase;
    position: relative;
    text-rendering: optimizelegibility;
vertical-align: baseline;
}
.name .first,
.name .amp,
.name .second{
    position: relative;
}

.name .first{
    animation: myfirst 700ms;
-moz-animation: myfirst 700ms; /* Firefox */
-webkit-animation: myfirst 700ms; /* Safari and Chrome */
-o-animation: myfirst 700ms; /* Opera */
}
.name .second{
    animation: myfirst2 700ms;
-moz-animation: myfirst2 700ms; /* Firefox */
-webkit-animation: myfirst2 700ms; /* Safari and Chrome */
-o-animation: myfirst2 700ms; /* Opera */
}

@keyframes myfirst
{
    from { left: -1em; opacity: 0; }
to { left: 0; opacity: 1; }
}

@-moz-keyframes myfirst /* Firefox */
{
 from { left: -1em; opacity: 0; }
to { left: 0; opacity: 1; }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from { left: -1em; opacity: 0; }
to { left: 0; opacity: 1; }
}

@-o-keyframes myfirst /* Opera */
{
 from { left: -1em; opacity: 0; }
to { left: 0; opacity: 1; }
}

@keyframes myfirst2
{
    from { left: 1em; opacity: 0; }
to { left: 0; opacity: 1; }
}

@-moz-keyframes myfirst2 /* Firefox */
{
 from { left: 1em; opacity: 0; }
to { left: 0; opacity: 1; }
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
from { left: 1em; opacity: 0; }
to { left: 0; opacity: 1; }
}

@-o-keyframes myfirst2 /* Opera */
{
 from { left: 1em; opacity: 0; }
to { left: 0; opacity: 1; }
}