JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <section class = "main-picture">
        <div class = "top-section">
            <h1 class = "title animated fadeInUp slideLeftTop"> <div class= "text-animated-one"> Pinkney</div> <div class= "text-animated-two"></div> Mills </h1>
            <h1 class = "subtitle animated fadeInUp slideLeftBottom"> "Simplicity is the ultimate form of sophistication." </h1>
        </div>
     </section>
 </body>

CSS

html, body {
	height: 100%;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	box-sizing: border-box;
	font-family: 'adramalechregular', sans-serif;
}

body {
	background: white;
	margin: 0;

}

a, a:active, a:hover, a:link {
  text-decoration: none;
  background: 0 0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	margin: 0.3em 0;
}

webkit-any(article,aside,nav,section) 
h1 {
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

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


h2 {
	font-size: 1.5em;
	-webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}


.main-picture {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #ffff;
	background-size: cover;
	background-repeat-x: no-repeat;
	background-repeat-y: no-repeat;
	box-sizing: border-box;
	display: block;
	overflow-x: hidden;
	overflow-y: hidden;
	text-align: center;
	text-size-adjust: 100%;
}

section {
	position: relative;
	text-align: center;
}

section .top-section {
  padding-top: 13%;
}

.top-section {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media screen and (min-width: 992px) {
  .top-section {
    width: 970px;
  }
}

@media screen and (min-width: 768px) {
  .top-section {
    width: 750px;
  }
}

.top-section .title {
  font-size: 3.5em;
  font-weight: 200;
  -webkit-animation-delay: .5s;
  animation-delay: .5s;

}

.top-section h1 {
  font: 'Adramalech', sans-serif;
  color: black;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/*.slideLeftTop {
  -webkit-animation-name: slideLeftTop;
  -webkit-animation-delay: 4s;
}

.slideLeftBottom {
  -webkit-animation-name: slideLeftBottom;
  -webkit-animation-delay: 4s;
}*/

.animated {
 ...