JSFiddle - React, Tailwind, and code Playground

by Antério Vieira

HTML

<div class="container">
	<div class="box blue"></div>
	<div class="box blue"></div><div class="box blue"></div>
	<div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div><div class="box blue"></div>
	
	
</div>
<div class="footer">
	
	<p>Hello! I am a footer. </p> 
	
</div>

CSS

body {
	padding: 30px;
}

div {
	display: block;
}

.container {
	width: 100%;
	border: 1px solid #ddd;
	position: relative;
}

.box {
	postition: absolute;
	display: inline-block;
	float: left;
	height: 20px;
	width: 20px;
}

.footer {
	float: left;
	width: 100%;
}

.blue {
	background-color: #4D9AF9;
	margin: 5px;
}