JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ru' lang='ru'>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <link rel='stylesheet' type='text/css' href='style.css' />
        <title>Текст</title>
    </head>
    <body>
        <div id='site'>

            <div id='header'>
                <h1>Заголовок</h1>
            </div>
            
            <div id='nav'>
                <a href='link'>Ссылка 1</a> | <a href='link'>Ссылка 2</a> | <a href='link'>Ссылка 3</a>
            </div>

            <h2>Топ</h2>
            <div id='set1'>    
                <div id='cell_1'>
                    Первое место
                </div>
                <div id='cell_2'>
                    Второе место
                </div>
                <div id='cell_3'>
                    Третье место
                </div>
            </div>
            
            <hr />
            
            <h3>Случайные</h3>
            <div id='set2'>
                <div id='box_1'>
                    Маленький блок 1
                </div>

                <div id='box_2'>
                    Маленький блок 2
                </div>

                <div id='box_3'>
                    Маленький блок 3
                </div>

                <div id='box_4'>
                    Маленький блок 4
                </div>
            </div>
            <hr />
            <div id='footer'>Подвал</div>
        </div>
    </body>
</html>

CSS

html, body {
    margin:5px;
    color:#333;  
    text-align:center;
    font-family:sans-serif;
    font-size:12px;
}

#site {    
    margin:0 auto;
    padding:10px;
    width:720px;
    text-align:left;
}

#site h2 {
    font-size:20px;
}

#site h3 {
    font-size:15px;
}

a {
    color:#e39601;
    font-weight:bold;
    text-decoration:none;
}

a:hover {
    color:#fff;
}

hr {
    margin:10px 0;
    border:0;
    width:100%;
    background-color:#bcd2ff;
    color:#bcd2ff;
    height:1px;
    clear:both;
    text-align:center;
}

#nav {
    /*border-top:1px solid #fff;*/
    text-align:right;
    background:#006abb;
    padding:10px 20px 10px 20px;
    color:#fff;
    font-weight:bold;
}

#header {
    height:60px;
    padding:10px;
    background-color:#004982;
    color:#fff;
}

#set1 {
    height:175px;
    color:#fff;
    text-align:center;
}

#set2 {
    height:130px;
    color:#fff;
    text-align:center;
}

#cell_1 {
    padding:10px;
    float:left;
    width:210px;
    background-color:#006abb;
    height:150px;
}

#cell_2 {
    margin:0 14px;
    padding:10px;
    float:left;
    width:210px;
    background-color:#006abb;
    height:150px;
}

#cell_3 {
    padding:10px;
    float:left;
    width:210px;
    background-color:#006abb;
    height:150px;
}

#box_1 {
    padding:8px;
    float:left;
    width:150px;
    background-color:#006abb;
    height:100px;
}

#box_2 {
    margin-left:16px;
    margin-right:8px;
    padding:8px;
    float:left;
    width:150px;
    background-color:#006abb;
    height:100px;
}

#box_3 {
    margin-left:8px;
    margin-right:16px;
    padding:8px;
    float:left;
    width:150px;
    background-color:#006abb;
    height:100px;
}

#box_4 {
    padding:8px;
    float:left;
    width:150px;
    background-color:#006abb;
    height:100px;
}

#footer {
    height:100px;
    text-align:center;
}