JSFiddle - React, Tailwind, and code Playground

by Zeljko Tadic

HTML

<div >
    <div class="calendar">
        <div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div><div class="day">
        </div>
    </div>
</div>

CSS

.calendar{
    width: 100vh;
    height:70vh;
}
.day{
    display:inline-block;
    width:14%;
    height:20%;
}
.day:nth-child(odd){
        background-color:blue;
}
.day:nth-child(even){
        background-color:red;
}