JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">

      <div class="banner">    
      </div>
     <div class="bannerwrap">
      <div class="logo">
         <img src="logo.png" />
      </div>
      <div class="recordsbild">
        <img src="records.png" />
      </div>
      <div class="musikstil">
        <a href="#"> Dubstep &#11; |</a> 
        <a href="#"> &#11; Hardstyle &#11; |</a>
        <a href="#"> &#11; Glitch Hop &#11; |</a> 
        <a href="#"> &#11; Chillstep</a>
      </div>
      <div class="line">
      </div>
      <div class="menulogos">
        <img src="menulogo.png" />
      </div>
      <div class="menu">
        <a href="#" class='contact'> Contact Us </a>
        </br>
        <a href="#" class='shop'> Shop </a>
        </br>
        <a href="#" class='release'> Releases </a>
        </br>
        <a href="#" class='artists'> Artists </a>
        </br>
        <a href="#" class='about'> About Us </a>
        </br>
        <a href="#" class='promoting'> Promoting </a>
      </div> 
      </div>
      <div class="socialmedia">
            <a href="#" class="fb"> <img src="fb.png" /></a>
            <a href="#" class="youtube"> <img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" /> </a>
            <a href="#" class="twitter"> <img src="twitter.png" /> </a>
            <a href="#" class="soundcloud"> <img src="soundcloud.png" /> </a>
      </div>
    </div>

CSS

body{
        margin: 0px auto;
        background-image:url(aa.jpg);
        background-position: center;
        background-attachment:fixed;
        background-color:black;
        background-repeat: no-repeat;
        }
    #main{
        margin: 0px auto;
    }

    .banner{
        height: 210px;
        margin-top: 35px;
        background-color: black;
        -khtml-opacity:.50; 
        -moz-opacity:.50; 
        -ms-filter:”alpha(opacity=50)”;
      filter:alpha(opacity=50);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
      opacity:.50; 
      border-top: 5px solid gray;
      border-bottom: 5px solid gray;
    }

    .logo{
        margin: 0px auto;
        margin-top: -300px;
        position:absolute;
        margin-left: 40px;
    }

    .recordsbild{
        margin: 0px auto;
        margin-left: 250px;
        position:absolute;
        margin-top: -200px;
    }

    .line{
        position:absolute;
        height: 180px;
        width: 10px;
        background-color: white;
        margin-top: -195px;
        margin-left: 950px;
    }
    .musikstil{
        position:absolute;
        font-family: "Arial Rounded MT Bold";
        font-size: 20px;
        margin-left: 420px;
        margin-top:-50px;


    }

    .musikstil a{
        text-decoration: none;
         transition: opacity .35s ease-in-out;
         -moz-transition: opacity .35s ease-in-out;
        -webkit-transition: opacity .35s ease-in-out;
        color: white;
    }

    .musikstil a:hover{
        opacity: 0.2;
    }


    .menu{
        position:absolute;
        width: 120px;
             opacity: 1.0;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
    margin: auto;
    margin-top: -190px;
    margin-left: 1020px;
    }

    .menu a{
        color: white;
        font-family:"Arial Rounded MT Bold";
        text-decoration:none;
        font-size: 20px;
        ...