JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <header>
            <div>
                <a href="#">MVS</a>
            </div>
        </header>
        <section>
            <nav>
                <ul>
                    <li><a href="#">Dasboard</a></li>
                    <li><a href="#">Chuc nang</a></li>
                    <li><a href="#">Nguoi dung</a></li>
                    <li><a href="#">Nhom</a></li>
                    <li><a href="#">Vai tro</a></li>
                    <li><a href="#">Thong ke</a></li>
                </ul>
            </nav>
            <article>
                <div class="box">
                    <img src="../imagesThi/quang canh .jpg" alt=""/>
                    <a href="#"><h4>Đối thoại về SGK: Vẫn chưa có tiếng nói chung, Bộ GD-ĐT sẽ tổng hợp, báo cáo Thủ tướng</h4></a>
                </div>
                <div class="box">
                    <img src="../imagesThi/ibrahimovic_0301.jpg" alt=""/>
                    <a href="#"><h4>Zlatan Ibrahimovic chính thức trở lại AC Milan sau 8 năm xa cách</h4></a>
                </div>
                <div class="box">
                    <img src="../imagesThi/tien_phong_the_thao_liverpool_xsfn.jpg" alt=""/>
                    <a href="#"><h4>Thống kê ‘vô đối’ của Liverpool tại Ngoại hạng Anh</h4></a>
                </div>
                <div class="box">
                    <img src="../imagesThi/ibrahimovic_0301.jpg" alt=""/>
                    <a href="#"><h4>Zlatan Ibrahimovic chính thức trở lại AC Milan sau 8 năm xa cách</h4></a>
                </div>
                <div class="box">
                    <img src="../imagesThi/quang canh .jpg" alt=""/>
                    <a href="#"><h4>Đối thoại về SGK: Vẫn chưa có tiếng nói chung,...

CSS

* {
    box-sizing: border-box;
    overflow: auto;
    margin: 0 auto;
    padding: 0;
}

body {
    width: 1260px;
    height: auto;
    padding: 5px;
    background-color: #b59e8e;
    
}

header {
    width: 100%;
    height: 60px;
    background-color: #c3c3c3;
}

section {
    width: 100%;
    height: 100%;
    background-color: blue;
}

nav {
     float: left;
    width: 15%;
    background-color: orange;
    height: 100%;
    border: 1px solid red;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li {
    margin: 0;
    height: 60px;
    line-height: 60px;
    display: block;
    text-align: center;
}

nav ul li a {
    text-decoration: none;
}

article {
    width: 85%;
    height: 100%;
    background-color: #853e00;
    position: relative;
    overflow: hidden;
}
.box {
    float: left;
    margin: 5px;;
    width: 48%;
    height: 290px;
    background-color: appworkspace;
    border-radius: 5px;
}
.box h4 {
    margin: 0;
    padding-left: 5px;
    padding-top: 5px;
    font-size: 18px;
}
.box a{
    text-decoration: none;
}
.box img {
    width: 98%;
    height: 200px;
    padding: 3px;
    border-radius: 5px;
}

.anh-2 {
    width: 220px;
    height: 240px;
    background-color: red;
    margin: 30px 40px;
}
.anh-2 img {
    width: 100%;
    height: 100%;
}
footer {
    width: 100%;
    height: 60px;
    background: black;
}
.clear {
    clear: both;
}