JSFiddle - React, Tailwind, and code Playground

HTML

<div class="site-wrapper">

      <div class="site-wrapper-inner main-cover">

        <div class="cover-container">

          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">Perfection Hosting</h3>
              <ul class="nav masthead-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="https://billing.perfectionhosting.us/">Billing</a></li>
                <li><a href="http://multicraft.perfectionhosting.us/">Multicraft</a></li>
                <li><a href="http://billing.perfectionhosting.us/contact.php">Contact Us</a></li>
              </ul>
            </div>
          </div>

          <div class="inner cover">
            <h1 class="cover-heading">Perfection Hosting</h1>
            <p class="lead">Perfection Hosting has the hotest Minecraft Hosting deals around, providing excellent support, amazing hardware, and an all around "perfect" experience.</p>
            <p class="lead">
              <a href="#" class="btn btn-lg btn-default" onclick="$('#myModal').modal()">Learn more</a>
            </p>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="myModal" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="color: black; padding: 20px; text-shadow: none;">
      <h2>Testimonials</h2>
      <p>Here is what a few of our customers think of our company (corrected for grammatical reasons)!</p>
      <p>...The server hardware is pretty good and I don't experience any lag at all</p>
      <p>...Their support staff did an excellent job in getting everything setup the way we needed it to be</p>
      <p>...These people should be on the Top Hosts list in BestMinecraftHosts.com!</p>
      <p>And many more. Our customers seem to think we do a pretty good job, so why don't you try us out and see how easy hosting a Minecraft Server can be.</p>
    </div>
 ...

CSS

/*
 * Globals
 */ /* Links */ a, a:focus, a:hover {
  color: #fff;
}
.marketing-box {
	height: 300px;
	max-height: 320px;
	border: 1px solid #fff;
	background-color: rgb(23,199,78);
	background-color: rgba(23,199,78,0.5);
	border-radius: 10px;
}
.minor {
	padding-top: 20px;
}
.major {
	-moz-box-shadow: 0 0 10px #CAD94A;
	-webkit-box-shadow: 0 0 10px #CAD94A;
	box-shadow: 0px 0px 10px #CAD94A;
	height: 320px;
}
.major-inner {
	padding-top: 20px;
}
.page-break {
	border-bottom: 1px solid black;
	-moz-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0px 0px 5px #000;
}
/* Custom default button */ .btn-default, 
.btn-default:focus {
  color: #fff;
  text-shadow: none; /* Prevent inheritence from `body` */
  background-color: #333;
  border: 1px solid #fff;
}
.btn-default:hover {
	color: #fff;
    text-shadow: none; /* Prevent inheritence from `body` */
    background-color: rgb(192,216,144);
    border: 1px solid #fff;
}
/*
 * Base structure
 */ html, body {
  height: 100%;
}
.main-cover {
 background: url(img1.png) 50% 50% no-repeat scroll;
 -webkit-background-size: cover;
 -moz-background-size: cover; 
 background-size: cover; /*Opera supports background-size without vendor prefix*/

}
body {
  background-color: #333;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal 
centering */ .site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
  border-style:solid;
  border-color: #333;
  border-radius: 5px;
  background-color: rgba(0,0,0,.5);
}
/* Padding for spacing */ .inner {
  padding: 15px;
}
/*
 * Header
 */ .masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
}
.masthead-nav > li {
  display:...

JavaScript

$(window).on('scroll', function(e) {
    var scrollTop = $('body').scrollTop();
    if (scrollTop > 300) { //300 is pixels you scrolled, it's just an example
        $('.masthead').addClass("fixed");
    } else {
        $('.masthead').removeClass("fixed");
    }
})