JSFiddle - React, Tailwind, and code Playground

HTML

<title>iHeartFandomz.net</title>


    <div class="container">
     <div class="col-xs-6">
       <div class="well"> 
       <ul>
         <li class="active"><a href="#Home" data-toggle="tab" style="text-decoration:none">Home</a></li>
         <li><a href="#Videos" data-toggle="tab" style="text-decoration:none">Videos</a></li>
         <li><a href="#Fanart" data-toggle="tab" style="text-decoration:none">Fanart</a></li>
       </ul>  
        </div>
         </div>

    <div class="main">
    		<h1>iHeartFandomz</h1>
    		<h2>Fandoms Collection</h2>
    	</div>

    <div class="links">
      <a href="https://www.youtube.com/user/HeartzHugzKissez" target="_blank"><img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;"></a>
      <a href="https://twitter.com/i_Heart_fandomz" target="_blank"><img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;"></a>
      <a href="https://gabbykun555.deviantart.com/" target="_blank"><img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;"></a>
      <a href="https://www.dailymotion.com/iHeartFandomz" target="_blank"><img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;"></a>
    </div>  
    </div>

    <footer class="footer">
    	<p style="  bottom: 0px;
      padding-bottom: 0px; ">Here's the footer</p>
    </footer>

CSS

body {
      background-color: white;
      background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
      background-size: cover;
      max-height: 100%;
    }

    ul {
      list-style-type: none;
      font-family: "Lucida Console";
      
    }

    li {
      font-size: 150%;
      font-family: Abel;
      display: inline;
      width: 390px; 
      margin: 18px;
      position: relative;
      bottom: -21px;
    }


    div.well {
      background-color: black;
      height: 55px;
      width: 1609px;
      position: relative;
      left: -17px;
      top: -20px;	
    }

    .container {
    	min-height: 100%;	
    }

    div.main {
      background-image: url();
      text-align: center;
      position: relative;
      padding-top: 20px;
      position: relative;
      bottom: -40px;
      min-height: 100%; 
    }

    p {
      color: white;
      text-align: center;
      position: relative;
      bottom: -50px;
      padding-bottom: 200px; 
    }

    h1 {
      text-align: center;
      font-family: "Londrina Shadow";
      font-size: 600%;
      color: black;
      letter-spacing: 0.2em;
    }

    h2 {
      font-family: Chewy;
      font-size: 300%;
      color: black;
      padding-bottom: 20px;
      position: relative;
      top: -60px;
    }

    li a:hover {
    	background-color: gainsboro;
    	color: black;
    }


    .links {
      text-align: center;
      letter-spacing: 15px;  
    }

    .youtube {
      position: relative;
      bottom: -3px;
    }

    .dailymotion {
      position: relative;
      top: -1px;
    }


    /* html, body {
    	height: 100%;
    	padding: 0;
    	margin: 0;	
    }  */


    .footer {
    	background-color: black;
    	height: 100px;
    	padding: 0;
    	margin: 0;
    }