JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<header>
  <div class="header__bg"></div>
  <div class="header__content">
    <h1>Header Content</h1>
    <p>Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. At vero eos et accusamus. Fugiat quo voluptas nulla pariatur? Eaque ipsa quae ab illo inventore veritatis et quasi.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco. Et harum quidem rerum facilis est et expedita distinctio. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</header>

<section>
  <div class="section__bg">
  </div>
  <div class="section__content">
    <h1>Section Content</h1>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco. Et harum quidem rerum facilis est et expedita distinctio. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</section>

CSS

body {
  margin: 0;
  font: 16px/1.25 'Avenir Next', sans-serif;
}

header {
  position: relative;
  overflow: hidden;
  padding-bottom: 10%;
}

.header__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://images.unsplash.com/photo-1498354150229-26139331c067?ixlib=rb-0.3.5&s=5cffe6f269e68f51014eecb5cde6a58b&auto=format&fit=crop&w=2001&q=80) center;
  background-image: url(https://images.unsplash.com/photo-1516441311474-499e4f3b32db?ixlib=rb-0.3.5&s=700f4960d74389692ad609b643c9e5ef&auto=format&fit=crop&w=1881&q=80);
  background-size: cover;
  transform: skewY(-10deg);
  transform-origin: top left;
  box-shadow: inset 0 0 200px #000;
}

h1 {
  margin: 0;
  padding: 40px 0 0;
}

header h1 {
  color: white;
}

.header__content {
  position: relative;
  color: white;
  padding: 40px;
  max-width: 640px;
  margin: 0 auto;
  text-shadow: #000 0 2px 10px;
}

.header__content p {
  color: white;
  font-size: 1.5em;
}

section {
  position: relative;
  padding-bottom: 10%;
}

.section__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #EEE;
  border-top: 4px solid #FFF;
  background-size: cover;
  transform: skewY(-10deg);
  transform-origin: top left;
}

.section__content {
  position: relative;
  padding: 40px 40px 80px;
  max-width: 640px;
  margin: 0 auto;
}