JSFiddle - React, Tailwind, and code Playground

by Pamela Cook

HTML

<script src="bootstrap.js"></script>
<script src="bootstrap.min.js"></script>
<div id="intro">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <h1>We are <span class="brand-heading">LightBe Corp</span></h1>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

body,
html {
  width: 100% !important;
  height: 100% !important;
}

h1 {
  font-weight: 700;
}

h1 strong {
  font-weight: 900;
}

#intro {
	display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: #fff;
	background: url("https://s3.amazonaws.com/lightbe/intro-bg.jpg") no-repeat center center fixed; background-color: #000;
	-webkit-background-size: cover; -moz-background-size: cover;	-ms-background-size: cover; background-size: cover;
}
#intro .intro-body { display: table-cell; vertical-align: middle; }
#intro .intro-body h1 { font-size: 76px; font-weight: 700; color: rgba(255,255,255,0.8); text-transform: uppercase; }
#intro .intro-body .brand-heading { color: #E75926; text-shadow: 0 4px #a13e1a; }
#intro .intro-body .intro-text { font-size: 18px; }

@media(min-width: 768px) {
	#intro { height: 100%; padding: 0; }
	#intro .intro-body .intro-text { font-size: 18px; letter-spacing: 1px; margin-bottom: 100px; color: rgba(255,255,255,0.9); }
}