JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<section class="intro" id="zen-intro">
  <header role="banner">
    <h1>CSS Zen Garden</h1>
    <h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
  </header>
</section>

SCSS

header[role="banner"] {
  height: 70vh;
  background: linear-gradient(to right, #2b2b2b 50%, white 50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  
  > * {
    z-index: 1;
  }
  
  &::after {
    background-image: url('https://picsum.photos/1920/1080/?random');
    background-size: cover;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    content: '';
    position: absolute;
    height: 80%;
    width: 50%;
    right: 3rem;
  }
  
  h1 {
    color: white;
    margin-left: 15%;
    font-size: 4.25rem;
    text-shadow: 0 2px 10 rgba(0,0,0,.15);
  }
  
  h2 {
    color: grey;
    margin-left: 10%;
    font-size: 2.2rem;
  }
}