JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div class="clendar-wrapper">
	    <ul class="calendar ">
	       <li class="calen-title"><a href="#">Monday  <br>Mar 23</a></li>
	       <li class="" style="min-height:40px;"><a data-day="1" rel="21" href="#"> 6:00 am</a> </li>
	       <li class="" style="min-height:40px;"><a data-day="1" rel="22" href="#"> 6:15 am</a> </li>
	    </ul>
	    <ul class="calendar ">
	       <li class="calen-title"><a href="#">Tuesday  <br>Mar 24</a></li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
	    </ul>
	     <ul class="calendar ">
	       <li class="calen-title"><a href="#">Wednesday  <br>Mar 24</a></li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
	    </ul>
	     <ul class="calendar ">
	       <li class="calen-title"><a href="#">Thursday  <br>Mar 24</a></li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
	    </ul>
	     <ul class="calendar ">
	       <li class="calen-title"><a href="#">Friday  <br>Mar 24</a></li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
	    </ul>
	     <ul class="calendar ">
	       <li class="calen-title"><a href="#">Saturday  <br>Mar 24</a></li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
	       <li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
	    </ul>
	     <ul class="calendar ">
	       <li class="calen-title"><a href="#">Sunday  <br>Mar...

CSS

.calendar{
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
    width: 100px;
}

.clendar-wrapper{
	width: 100%;
	max-width: 700px;
	margin: auto;
}

@media (max-width: 699px) {
	.calendar{
		width: 100%;
		float: none;
		margin: 30px 0;
	}
}

.calen-title {
    background-color: #D9E8F4 !important;
}

.calen-title a{
    font-size: 16px;
    color: #222; 
    font-weight: bold;
}

.calendar li{
    padding: 8px;
    border: 1px solid #ddd;
}

.calendar li a {
    color: #222;
    font-size: 16px;
}

.calendar li:nth-child(2n+2) {
    background-color: #f9f9f9;
}

.clear { clear: both; }