JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header id="top" class="main-header"> <span class="title">Journey Through the Sierra Nevada Mountains</span>

         <h1 class="main-heading">Lake Tahoe, California</h1>

    </header>
    <div class="primary-content">
        <p class="intro">Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.</p> <a class="callout" href="#more">Find out more</a>

    </div>
    <!-- End .primary-content -->
</body>

CSS

.main-header {
  background: -webkit-linear-gradient( bottom,steelblue, darkslateblue 90%);
  background: -moz-linear-gradient( bottom,steelblue, darkslateblue 90%);
  background: -o-linear-gradient( bottom,steelblue, darkslateblue 90%);
  background: linear-gradient( bottom,steelblue, darkslateblue 90%);
}