JSFiddle - React, Tailwind, and code Playground

by Optimix

HTML

<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,400:italic,700' rel='stylesheet' type='text/css'>

<div class="centered-content">
  <h1>The best preparation for tomorrow is doing your best today.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in tristique mauris. Quisque massa ipsum, interdum bibendum dignissim ut, lacinia quis velit. Maecenas lacinia velit et finibus vulputate. Vivamus egestas rutrum sem, vitae ullamcorper metus tincidunt at. Vivamus dapibus diam vitae finibus cursus.</p>
  <em>H. Jackson Brown, Jr.</em>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

html,
body {
  height: 100%;
  min-height: 100%;
}

body { 
	/* Generated with http://gradient.quasi.ink */
	webkit-background-size: cover;
  background-size: cover;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAADCAYAAABfwxXFAAAAYklEQVQIWwFXAKj/ATcnQ/8xDikA7e3yAAEOCQD9C/4A+vH0AB0NIwABUype/ywGMgAZMBQA8OzuAPTm+AC+6c0ASDo7AAF7N3z/7OvuAFR8TgAC7QgA28LeAB9NJwDQu80Ail4h90EjrCcAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
  font-size: 16px;
}

.centered-content {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  width: 70%;
}

h1 {
  font-family: 'Roboto Slab';
  font-size: 9vh;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.05;
}

em {
  font-family: 'Roboto Slab';
}