JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Brillante</title>
        <meta name="description" content="A Brilliant Website Design">
    </head>
    <body>
        <div class="page">
        <header>
            <div class="header_top">
                <ul class="nav">
                    <li><div></div><a href="#" class="select">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
    
                </ul> 
                    <form class="search">
                    <input type=text name="s" id="s" placeholder="search.." class="search_text">
                    <input type="submit" class="search_go" value="">    
                    </form>
                <div class="rss">
                    <a href="#"><span>Grab out feeds</span><img src="img/rss.png" alt="Blog RSS"/></a>
                                                                                                 
                </div>

            </div>
            <div class=header_bottom>
                <h1>Brillante</h1>
                <p class="descr">A very description about the website goes here. And that`s it!</p>
                <p class="slogan">A Brilliant Website Design</p>
            </div>
            <div>
             <img class="slider" src="img/slider.jpg" alt="slider"/>
            </div>    
        </header>
        <div class="main">
            <div class="content">
                <h3>LATES FROM THE BLOG</h3>
                <div class="post">
                    <div class="phead">
                        <h2><a href="#">An Example Of a Post Goes Here</a></h2>
                        <div class="meta-top">
                            <span...

CSS

@import url(reset.css);

html {
    height: 100%;   
}

body {
    background: #282828;
    color: #d1d1d2;
    padding-top: 20px;
    min-height: 100%;
    font-family: Arial, helvetica, sans-serif;
    font-size: 14px;
}
p {
    font-size: 14px;
    color: #1a1e27;
    line-height: 1.5;
}
a {
    text-decoration: none;
    color: #c0c1c5;
    font-size: 14px;
}
a:hover {
    text-decoration: underline;
    color:white;
    font-size: 14px;
}
.page {
    width: 960px;
    background: #ededed;
    margin: auto;
}
.clear{
    clear: both;
}
header{
    height: 444px;
}
.header_top{
    height: 64px;
    background: #1a1e27;
    border-bottom: 3px solid #ffffff;
}
.header_bottom{
    height: 141px;   
}
header ul{
    float: left;
    margin: 23px 244px 0 34px;
}
header ul li{
    position: relative;
    float: left;
    padding-left: 10px;
}
header ul li a{
    height: 41px;
    display: block;
}
header ul li a:hover{
    text-decoration: none;
}
.select{
    height: 41px;
    display: block;
    color: white;
    text-decoration: none;
}
.search{
    float:right;
    margin: 12px 35px 0 0;
    width: 191px;
    height:35px;
    background:url(img/search.png) no-repeat;
}
.search_text{
    width: 137px;
    margin: 10px 0 0 25px;
    background: none;
    border: none;
    outline: none;
}
.search_go{
    width: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 10px;;
}
.rss{
    float: right;
     margin-top: 20px;
}
.rss span{
    position: relative;
    top: -5px;
    left: -10px;
}
.header_bottom h1{
    font-size: 28px;
    text-transform: uppercase;
    float: left;
    display: inline-block;
    color: #2f333b;
    margin: 60px 25px 0 74px;
    font-weight:700;
}

.descr {
    display: inline-block;
    font-style: italic;
    width: 218px;
    background: url(/img/line.png) no-repeat left;
    padding-left: 25px;
    margin-top: 68px;
    clear: both;
}
.slogan {
    margin: -5px 0px 0 74px;
    color: #646464;
}
.slider{
...