JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
                <meta charset="utf-8" />
                <title>Bolonsky pes</title>
                <link rel="stylesheet" type="text/css" href="style2.css" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                
                <!--[if IE]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                <![endif]-->
</head>
     
<body>   
      <div id="wrapper">
          <div id="header">
          <a href="index.html"><img class="img" src="https://s-media-cache-ak0.pinimg.com/736x/08/2f/12/082f12415b83d2af889118b9eaf619d6.jpg" /></a> 
          </div>
          <nav>
              <ul>
                  <li class="active"><a href="#">Intro</a></li>
                  <li><a href="#">Size</a></li>
                  <li><a href="#">Play</a></li>
                  <li><a href="#">Food</a></li>
              </ul>
                      <div class="clear"></div>
          </nav>
          <aside class="sidebar">  
          <div id="social">          
              <tr>
                  <td><a href="http://www.facebook.com" target="_blank"><img class="img" src="http://png-3.findicons.com/files/icons/2229/social_media_mini/48/facebook.png"/></a></td>
                  <td><a href="http://www.youtube.com" target="_blank"><img class="img" src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/48/YouTube-icon.png"/></a></td>
                  <td><a href="http://www.twitter.com" target="_blank"><img class="img" src="http://icons.iconarchive.com/icons/designbolts/3d-social/48/Twitter-icon.png"/></a></td>
                  <td><a href="http://www.plus.google.com" target="_blank"><img class="img" src="https://cdn2.iconfinder.com/data/icons/New-Social-Media-Icon-Set-V11/48/google-plus.png"/></a></td>
              </tr>   
          </div>
          </aside>
                              
                   
          <section...

CSS

body {
    background-color : #DAD5C1;
    font-family :"Helvetica", "Arial", Tahoma;
}

h3 {
    text-align : center;
    text-decoration : underline;
}

p {
    padding: 2%;
}

img {
    text-align : center;
    max-width : 100%;
    height : auto;
    width : auto;
}

#wrapper {
    margin : 0 auto;
    max-width : 980px;
    width : 96%;
    background-color: #CBBB9B;
    padding : 2%;
    border-radius : 10px;
    }
    
#header {
    padding : 5px;
    text-align : center;
}
    

nav {
    background-color : #A09885;
    padding : 0;
    margin : 0 0;
    border-radius: 10px;
}

nav ul {
    list-style : none;
    margin-left : 7%;
    padding : 0;
}
nav li a {
    color : #000;
    display : block;
    float : left;
    padding : 18px;
    text-decoration : none; 
        
}             
nav a:hover, nav li.active a
{
    background-color : #322F2C;
    color : #fff;
}
.clear {
     clear : both;
}

#social {
    text-align : center; 
}

#social img {
    padding-top : 10px;
    height : 50px;
    width: 50px;
}

.left-col {
    background : #DAD5C1;
    width : 60%;
    margin-top : 2%;
    border-radius : 10px;
}
.sidebar {
    background : #DAD5C1;
    width : 38%;
    float : right;
    margin-top : 2%;
    border-radius : 10px; 
}
.vid {
    position : relative;
    padding-bottom : 56.25%;
    padding-top : 30px;
    height : 0;
    overflow : hidden;
}
.vid iframe {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}