JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
      


    </head>
    <body id="index" class="home">

        <div class="" id="header">
           
        </div>

        <div style="min-width:900px;position:absolute;top:46px;left:0;right:0;bottom:0">
        <div id="sidebar" style="background:red">
            
        </div>

        <div id="content">
            
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>
            <div style="float:left;background:white;height:500px;width: 200px;margin:20px"></div>

        </div>

</div>
    </body>
</html>

CSS

html, body { 

               
                
               


            }
body {
  
}

/*
#be3e1b
#1a1a1a
*/
#header{
    background : #1a1a1a;
    height: 46px;
    width:100px;
    line-height: 46px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    overflow: hidden;
    color:white; 
}

#header img{
    margin-top:12px
}

#header div {
    text-align: left;
    color: white;    
    height: 46px;
}

#header > div:first-child {
    padding-left:10px;
}
#header #nav {
  
}
#header #nav ul{
    height: 46px
}

#header #nav ul li{ 
    float:left;
    margin-right: 50px;
    height: 36px;
    cursor: pointer;
    padding:10px 10px 0 10px
}

#header #nav ul li:last-child{ margin: 0}

#header #nav ul li a{
   wdth: 100%; height: 100%; display: block; 
}
#header #nav div{
    background-repeat: no-repeat;
    background: url('../images/sprite.png');
    width: 22px;
    height: 21px;    
}

#header #nav #home{ background-position: 0 0 }
#header #nav #visit{ background-position: -22px 0 }
#header #nav #contact{ background-position: -44px 0 }
#header #nav #message{ background-position: -110px 0; width:27px }
#header #nav #wizz{ background-position: -142px 0;width: 41px; height: 25px }
#header #nav #search{ background-position: -66px 0 }
#header #nav #config{ background-position: -88px 0 }

#header #nav li:hover #home{ background-position: 0 -22px }
#header #nav li:hover #visit{ background-position: -22px -22px }
#header #nav li:hover #contact{ background-position: -44px -22px }
#header #nav li:hover #message{ background-position: -110px -21px; width:27px }
#header #nav li:hover #wizz{ background-position: -142px -26px;width: 41px; height: 25px }
#header #nav li:hover #search{ background-position: -66px -22px }
#header #nav li:hover #config{ background-position: -88px -22px }

/************************************************/
/*                  SIDEBAR                     */


#sidebar{
    color:#fff;
    position:absolute;
    top:0;
   ...