JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
<div class="one">4</div>
<div class="two">5</div>
<div class="two">6</div>
<div class="two">7</div>
<div class="one">8</div>
<div class="one">9</div>
<div class="two">10</div>
<div class="two">11</div>
<div class="two">12</div>
<div class="two">13</div>
<div class="two">14</div>
<div class="one">15</div>
<div class="two">16</div>
<div class="two">17</div>

CSS

body{
  padding: 64px;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-family: Arial;
  line-height: 40px;
}

div {
  width: 100%;
  margin: 2px;
}

.one {
  background-color: red;  
}

.two {
  background-color: cyan;  
}
div:nth-child(1){margin-top:10px;color:green}
div:nth-child(17){margin-bottom:10px;color:yellow}