JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    
    <div class="box double"></div>
    <div class="box double"></div>
    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

html {
	font-family: thaoma;
	font-weight: normal;
    font-size: 17px;
	padding: 0;
	margin: 0;
	background: rgb(100, 98, 102);
    
}

body {
    
    margin: 0 auto;
}



#page {
    margin: 0 auto;
    display:box;
    max-width: 100%;
    
}

#page:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.box h2 {
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 24px;
    padding: 0 10px 0 10px;
    margin: 0;
    }
    
.box ul {
    float:right;
    padding: 0px 10px 0px 10px;
}
    
.box li
    {
        list-style-type:none;
        padding: 5px;
        
    }
    
.box {
    width: 20%;
    height: 200px;
    background: gray;
    color: white;
    float: right;
    padding: 5px;
    margin: 5px;
    border: 1px solid white;
    position: relative;
    
    
    }

.double {
    width: 43.5%;
}

a:link {color: white;}      /* unvisited link */
a:visited {color: white;}  /* visited link */
a:hover {color: silver;}  /* mouse over link */
a:active {color:white;}  /* selected link */