JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<div id="top" class="header eightspokes-intro">
         <div class="header-row" style="height:50%">
            <div class="vert-text">
                <img src="img/eightspokes-white.png" width="320" alt="Enlighten Me">
            </div>
         </div>
         <div class="header-row" style="height:38%">
            <div class="vert-text-bottom">
               <div class="container padding-125">
                  <h3>
                     <span>
                     acutely focused on raising the <span class="header-highlight">accountability</span>, <span class="header-highlight">transparency</span> and <span class="header-highlight">effectiveness</span> of teams within life science organizations
                     </span> 
                  </h3>
               </div>
            </div>
         </div>
         <div class="header-row">
            <div class="vert-text-bottom">
               <a href="#top2" class="go-next">
                   <img src="img/down_green.svg" alt="scroll">
               </a>
            </div>
         </div>
      </div>

CSS

.header{
display: table;
height: 100%;
width: 100%;
position: relative;
background-image: url(http://www.eightspokes.com/img/bg2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: #000;
}