JSFiddle - React, Tailwind, and code Playground

HTML

<title>Головна</title>
    <body>
    <div class="container">
    <!-- header -->
    <div class="row header_div">
    <ul class="header_list">
    <li><a href="">Головна</a></li>
    <li><a href="">Про нас</a></li>
    <li><a href="">Контакти</a></li>
    </ul>
    </div>
    <!-- main-content -->
    <div class="row main_content">
    <div class="col-lg-3" style="background: #999999;">
    Sidebar
    </div>
    <div class="col-lg-9" style="background: #AAAABB;">
    Content
    </div>
    </div>
    <!-- footer -->
    <div class="row" style="background: #741590;">
    Footer
    </div>
    </div>
    <!-- JS Twitter Bootstrap -->
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>

CSS

.header_div {
    display: block;
    height: 50px;
    background: #68614d;
    }
     
    .header_list {
    display: inline-block;
    list-style: none;
    float: right;
    }
     
    .header_list li {
    display: inline;
    }
     
    .header_list li a {
    display: block;
    text-align: center;
    margin-right: 15px;
    margin-top: 5px;
    padding-top: 7px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #e4decd;
    height: 35px;
    background: #66814d;
    }
     
    .header_list li a:hover {
    position: relative;
    margin-top: 25px;
    }
     
    .main_content {
    background: #654321;
    }