JSFiddle - React, Tailwind, and code Playground

HTML

This: no
<div class="gradient-wrapper"></div>

<div class="wrapper liquid">
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
	<div class="tile"></div>
</div>

This: yes
<div class="wrapper">
	<!-- <div class="tile tile-01"></div> -->
	<div class="tile tile-02"></div>
	<!-- <div class="tile tile-03"></div> -->
	<div class="tile tile-04"></div>
	<!-- <div class="tile tile-05"></div> -->
	<div class="tile tile-06"></div>
	<!-- <div class="tile tile-07"></div> -->
	<div class="tile tile-08"></div>
	<!-- <div class="tile tile-09"></div> -->
	<div class="tile tile-10"></div>
	<!-- <div class="tile tile-11"></div> -->
	<div class="tile tile-12"></div>
	<!-- <div class="tile tile-13"></div> -->
	<div class="tile tile-14"></div>
	<!-- <div class="tile tile-15"></div> -->
	<div class="tile tile-16"></div>
	<!-- <div class="tile tile-17"></div> -->
	<div class="tile tile-18"></div>
</div>

CSS

body {
	padding: 50px;
}
.gradient-wrapper {
	width: 459px;
	height: 50px;
	border: 1px solid #333;
	margin-bottom: -52px;
	background: -moz-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,255,0,1)), color-stop(100%, rgba(255,0,0,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* ie10+ */
    background: linear-gradient(90deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1 ); /* ie6-9 */ 
}
.liquid {
	margin-bottom: 50px;
}
.wrapper {
	width: 459px;
	height: 50px;
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;

}
.tile {
	border-right: 1px solid #333;
	height: 50px;
	width: 50px;
	float: left;
}
.tile-01{background: #0DF200;}
.tile-02{background: #1BE400;}
.tile-03{background: #29D600;}
.tile-04{background: #38C700;}
.tile-05{background: #46B900;}
.tile-06{background: #54AB00;}
.tile-07{background: #629D00;}
.tile-08{background: #708F00;}
.tile-09{background: #7F8000;}
.tile-10{background: #8D7200;}
.tile-11{background: #9B6400;}
.tile-12{background: #A95600;}
.tile-13{background: #B74800;}
.tile-14{background: #C53A00;}
.tile-15{background: #D42B00;}
.tile-16{background: #E21D00;}
.tile-17{background: #F00F00;}
.tile-18{background: #FE0100;}