JSFiddle - React, Tailwind, and code Playground

by Abhay Singh

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
<div class="container">
<div class="mainContainer">
	<div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
</div>
</div>
</body>
</html>

CSS

*{margin:0px;padding:0px;}
.container{width:100%;max-width:1260px;margin:0 auto;height:450px;background:#fff000;}
.mainContainer{width:calc(100% + 25px);}
.col{
max-width:23.2%;
width:23.2%;
background:#fff;
height:150px;
border:#000 1px solid;
margin:20px 20px 0 0px;
float:left;
}