JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
  
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Cosmic Revamp</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
	<link href="css/style.css" rel="stylesheet">

  </head>
  <body>
  
  
  	<section id="home">

	    <!--<img class="slid3"src="images/slide3.png" alt="sliderleft" style="width:100%">
	 
	     <img class="slid4" src="images/slide4.png" alt="sliderleft" style="width:100%">-->

		 
		 <div id="planet"></div>
			<div id="heroic-armor"></div>
	
	<div id="container">
	<div class="text-center">

<div id="section-1">
<h1 class="center subtext"><div>COSMICRELM PRESENTS</div></h1>
<h1 class="center border1"><div>THE DESTROYED OUTPOST</div></h1>
<div id="planet"></div>
<p>The Destroyed Outpost /dungeon is the continuation of the <span>Abandoned Spaceship storyline</span>. In this epic rendition of Cosmic lore, you and your fellow Cosmonaut will travel down to the <span>Destroyed Outpost of the planet the Abandoned Spaceship was orbiting</span>.</p>
<p class="lore">"With the ship’s teleportation matrix solved, the <span>Mother of Yijki’s</span> source location has been traced. There is a rift into its dimension at the core of this destroyed mining outpost."</p>

</div>
</div>
</div>

  
  
      <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom JavaScript for this theme -->
    <script src="js/scrolling-nav.js"></script>
  
  
  </body>
  </html>

CSS

/* navbar */


body {
    margin: 0px;
    padding: 0px;
    background-color: #0a0504;
    font-family: 'Teko', sans-serif;
    color: #fff;
}

div#container {
width: 1100px;
    margin: 0px auto;
    position: relative;
    z-index: 10;
}
div {
    display: block;
}

h1, h2, h3, h4, h5, h6 {
	 background: -webkit-linear-gradient(#fff, #f0ba49, #884932, #492517);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    z-index: 40;
    font-family: Mainfont;
}

@font-face { font-family: Mainfont; src: url('../fonts/font1.otf'); }

h1.subtext {
    font-size: 20px;
    margin-bottom: 0px;
}

h1.border1 {
	border-color: #6c472c;
	border-style: solid;
    border-width: 0px 0px 1.8px 0px;
	font-size: 40px;
    margin: 0 auto 15px auto;
}

p span, li span {
    color: #da4900;
}
p {
    font-family: 'Radiance', serif;
    font-size: 26px;
    text-align: center;
    color: #d3be99;
    margin: 0px;
    padding-bottom: 15px;
}

p.lore {
    background-color: rgba(211,190,153,0.2);
    padding: 25px;
    font-style: italic;
    color: #fff;
    font-size: 20px;
    width: 950px;
    margin: 25px auto !important;
    line-height: 160%;
    border: 4px solid #af633d;
    letter-spacing: 1px;
}

#planet {
  z-index: 9;
  width: 100%;
  height: 549px;
  background: url("http://heroic.cosmicpvp.com/images/planet.jpg") no-repeat;
  background-size:cover;
  background-position:top center; 
}

div#section-1 {
    padding-top: 30px;
    padding-bottom: 100px;
}