JSFiddle - React, Tailwind, and code Playground

by lindsay bradford

HTML

<header>
  <div class="container">
    <div class="row">
      <a href="index.html">
        <img src="http://huahin247.com/wp-content/uploads/2015/10/dummy-logo.png" class="img-responsive" alt="">
      </a>
    </div>
  </div>
</header>

<section class="welcome-home">
  <div class="container">
    <div class="col-md-12">
      <h2>Title here</h2>
      <p>Nullam vestibulum augue id felis placerat interdum. Curabitur vitae magna dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi suscipit tempus diam. Donec purus nisi, efficitur in sem sit amet, vehicula</p>
    </div>
  </div>
</section>

CSS

header {
	background: #f6f6f6;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	width: 100%;
	min-height: 160px;
	position: fixed;
	z-index: 1111;
	top: 0;
	padding: 5px 0;
	border-bottom:5px #7C1331 solid;
}
.welcome-home {
	margin-top: 100px;
}

JavaScript

$(function() {
  var headHeight = $('header').outerHeight();
  
  $('.welcome-home').css({'margin-top': headHeight });
});