JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<header class="diagonal">
  <h1>Page Title Lorem Ipsum [delete me to shorten the hero]
  <p>Nulla vel eros egestas, viverra nunc et, consectetur tellus. Nullam eros orci, sodales et tempus et, fringilla eu neque. Vestibulum eros massa, ultricies id ligula quis, euismod bibendum dui. Aliquam erat volutpat. Duis fringilla leo non arcu sodales, eu feugiat nunc sagittis. Proin fermentum tincidunt arcu eu faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sit amet dapibus tortor. Aenean ut dapibus felis.</p>
</header>
<div class="content">
  <h2>Section Header</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque sapien in sem ultricies, at bibendum massa lobortis. Aenean iaculis, magna eu ullamcorper condimentum, mauris magna accumsan turpis, et semper ante magna bibendum lacus. Nulla luctus vitae ligula ac cursus. Suspendisse molestie fringilla dignissim. Duis sem lectus, euismod a mi in, venenatis efficitur quam. Sed ut justo id mi dictum consectetur. Etiam sit amet metus lorem. Donec nisi nulla, feugiat a rhoncus sit amet, aliquam quis ligula.</p>
  <p>Nulla vel eros egestas, viverra nunc et, consectetur tellus. Nullam eros orci, sodales et tempus et, fringilla eu neque. Vestibulum eros massa, ultricies id ligula quis, euismod bibendum dui. Aliquam erat volutpat. Duis fringilla leo non arcu sodales, eu feugiat nunc sagittis. Proin fermentum tincidunt arcu eu faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sit amet dapibus tortor. Aenean ut dapibus felis.</p>
  <p>Mauris quis egestas nisi. Ut ac mollis lectus. Sed pellentesque id mauris imperdiet efficitur. Sed commodo nibh quis erat commodo tempus. Phasellus quis ex a velit ornare aliquet ut vitae urna. Suspendisse potenti. Nullam posuere quam eu metus posuere, non blandit mauris vestibulum. Suspendisse ultricies sapien eleifend, ornare velit et, tincidunt metus. Morbi a ligula ac quam auctor ullamcorper. Donec gravida,...

CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");


.content {
  padding: 0 50px 50px;
}

h2 {
  margin: 1.5em 0 0;
}

.diagonal {
  overflow: hidden;
  position: relative;
  width: 100%;
  background: url("https://unsplash.it/1920/1080?image=901") no-repeat;
  background-attachment: scroll;
  background-size: cover;
  color: #fff;
  display: table;
  min-height: 300px;
  text-align: center;
}
.diagonal:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.diagonal:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 100vw solid #fff;
  border-top: 12vw solid transparent;
}
.diagonal h1 {
  display: table-cell;
  font-size: 40px;
  line-height: 60px;
  padding-top: 6vw;
  padding-bottom: 16vw;
  position: relative;
  vertical-align: middle;
  width: 40vw;
}