JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<body>
  <div id="navbar">
    <ol id="navbartext">
      
        <li class="navbarhover"><a href="buynow.html">Buy Now</a></li>
      
      <li>&nbsp;</li>
      <li class="lijn"></li>
      <li>&nbsp;</li>
      
        <li class="navbarhover"><a href="news.html">News</a></li>
      
      <li>&nbsp;</li>
      <li class="lijn"></li>
      <li>&nbsp;</li>
      
        <li class="navbarhover"><a href="media.html">Media</a></li>
      
      <li>&nbsp;</li>
      <li class="lijn"></li>
      <li>&nbsp;</li>
      
        <li class="navbarhover"><a href="contact.html">Contact</a></li>
      
      <li>&nbsp;</li>
      <li class="lijn"></li>
      <li>&nbsp;</li>
      
        <li class="navbarhover"><a href="aboutus.html">About Us</a></li>
      

    </ol>

  </div>
  <div id="pulze_head">
    <div>
      <a href="home.html"><img src="http://i1279.photobucket.com/albums/y523/textcraft/Feb%202016%20-%201/8acbb507eeafc639a7546fda2f57ce6fbc622e50da39a3ee5e6b4b0d3255bfef95601890afd80709da39a3ee5e6b4b0d3255bfef95601890afd807092f73_zpsyluuham4.png" border="0" alt="PulzeName Logo"
        title="Homepage"></a>
    </div>
  </div>

  <div id="videoboxlabel"></div>

  <p id="videoboxlabeltext"><strong><em>The Future Is Now...</em></strong></p>

  <div id="videobox">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/QtlgSxRfBUY?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
  </div>

  <a href="buynow.html">
    <div class="sporteditionbox"></div><img id="sporteditionimg" width="18%" height="50%" src="http://www.webuyback.com.au/uploads/prdct_img/3fd7472cfc49d3cd329ffb9ee2bb7d7f.PNG" title="Pulze Sport Edition"></a>
  <a href="buynow.html">
    <div class="classiceditionbox"></div><img id="classiceditionimg" width="18%" height="40%" src="http://www.samsung.com/uk/gear-s2/features/images/thumb_gears2_classic_black.png" title="Pulze Classic Edition"></a>

</body>
<!-- Hieronder de footer -->

<div class="footer">

  <!-- zelfs...

CSS

* {
  padding: 0%;
  margin: 0%;
}

body {
  background-color: #131613;
}


/*pulze_head is de afbeelding block bovenin de website */

#pulze_head {
  border-radius: 5px;
  border: 3px solid #008CBA;
  height: 16%;
  width: 40%;
  background-color: #4B4B4B;
  margin-top: 0%;
  margin-left: 30%;
  position: absolute;
}

img {
  position: absolute;
  margin-left: 0%;
  margin-top: 0%;
  width: 100%;
  height: 100%;
}

/*Put this rule first so it matches the HTML structure*/
#navbar {
  position: absolute;
  height: 5%;
  width: 50%;
  top: 20%;
  left: 50%;
  margin-left: -25.1%;
  padding: 5px;
  border: 3px solid #008CBA;
  background-color: #333;
  margin-top: 2.5%;
  font-size: 100%;
}

#navbartext {
  color: white;
  font-family: Futura, Verdana, Arial;
  /*position: absolute;*/
  /*display: table;*/
  text-align: center;
  margin: 0 auto;
  font-size: 120%;
  /*margin-left: 18%;*/
  /*margin-right: 18%;*/
  margin-top: 0.5%;
  margin-bottom: 0.5%;
  padding: 0%;
  background: red;
}



#navbarlinks {
  margin: auto;
  display: inline;
}

p {
  font-size: 20px;
  font-family: Futura;
}

.lijn {
  border-left: medium solid #131613;
}

.navbarhover:hover {
  width: 300px;
  height: 30px;
  background-color: #008CBA;
  outline: 3px solid #008CBA;
  color: white;
  box-shadow: 10px 10px 10px black;
}


/* De text zelf zonder dat je erover heen hovert*/

.textzonderhover {
  color: white;
  text-decoration: none;
}

#videobox {
  display: none;
  /*top properties are temporary*/
  height: 53%;
  width: 43.9%;
  background-color: #333;
  border: 10px solid #008CBA;
  border-radius: 10px;
  position: absolute;
  margin-left: 27.7%;
  margin-top: 20%;
  margin-bottom: -50%;
}

#videoboxlabel {
  height: 5%;
  width: 20%;
  position: absolute;
  background-color: #4B4B4B;
  margin-left: 39.7%;
  margin-top: 17.5%;
  border-top: 5px solid #008cba;
  border-right: 5px solid #008cba;
  border-left: 5px solid #008cba;
  border-radius: 3px;
}

#videoboxlabeltext {
 ...