JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<div class="eaKeyDate">1</div>
<div class="eaKeyDate">2</div>
<div class="eaKeyDate">3</div>
<div class="eaKeyDate">4</div>
<div class="eaKeyDate">5</div>
<div class="eaKeyDate">6</div>
<div class="eaKeyDate">7</div>
<div class="eaKeyDate">8</div>
<div class="eaKeyDate">9</div>
<div class="eaKeyDate">10</div>
<div class="eaKeyDate">11</div>
<div class="eaKeyDate CurrentYear">12</div>
<div class="eaKeyDate CurrentYear">1</div>
<div class="eaKeyDate CurrentYear">2</div>
<div class="eaKeyDate CurrentYear">3</div>
<div class="eaKeyDate CurrentYear">4</div>
<div class="eaKeyDate CurrentYear">5</div>
<div class="eaKeyDate CurrentYear">6</div>
<div class="eaKeyDate CurrentYear">7</div>
<div class="eaKeyDate CurrentYear">8</div>
<div class="eaKeyDate CurrentYear">9</div>
<div class="eaKeyDate CurrentYear">10</div>
<div class="eaKeyDate CurrentYear">11</div>

CSS

.eaKeyDate { width:30px; height:20px; line-height:20px; text-align:center; border:solid 1px #ccc; display:none }

.eaKeyDate:nth-child(n+9) { background-color:green; color:white; display:block; }

.eaKeyDate.CurrentYear { background-color:red !important; color:white !important; display:block !important; }