JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calendar"><div class="clndr"><div class="cal-legende"><div class="header-days"><div class="header-day">L</div><div class="header-day">M</div><div class="header-day">M</div><div class="header-day">J</div><div class="header-day">V</div><div class="header-day">S</div><div class="header-day">D</div></div></div><div class="cal-body"><div class=" week cal-week-0"><div class="day past adjacent-month last-month calendar-day-2015-02-23 calendar-dow-0">23<div class=" value val-23"></div></div><div class="day past adjacent-month last-month calendar-day-2015-02-24 calendar-dow-1">24<div class=" value val-24"></div></div><div class="day past adjacent-month last-month calendar-day-2015-02-25 calendar-dow-2">25<div class=" value val-25"></div></div><div class="day past adjacent-month last-month calendar-day-2015-02-26 calendar-dow-3">26<div class=" value val-26"></div></div><div class="day past adjacent-month last-month calendar-day-2015-02-27 calendar-dow-4">27<div class=" value val-27"></div></div><div class="day past adjacent-month last-month calendar-day-2015-02-28 calendar-dow-5">28<div class=" value val-28"></div></div><div class="day past calendar-day-2015-03-01 calendar-dow-6">1<div class=" value val-1"></div></div></div><div class=" week cal-week-1"><div class="day past calendar-day-2015-03-02 calendar-dow-0">2<div class=" value val-2"></div></div><div class="day past calendar-day-2015-03-03 calendar-dow-1">3<div class=" value val-3"></div></div><div class="day past calendar-day-2015-03-04 calendar-dow-2">4<div class=" value val-4"></div></div><div class="day past calendar-day-2015-03-05 calendar-dow-3">5<div class=" value val-5"></div></div><div class="day past calendar-day-2015-03-06 calendar-dow-4">6<div class=" value val-6"></div></div><div class="day past calendar-day-2015-03-07 calendar-dow-5">7<div class=" value val-7"></div></div><div class="day past calendar-day-2015-03-08 calendar-dow-6">8<div class=" value val-8"></div></div></div><div class=" week...

CSS

#calendar{
    background-color:rgba(12, 114, 189, 0.37);
    padding:30px;
}

.cal-legende{
    padding-left: 50px;
    padding-right: 50px;
}

.cal-legende .header-day{
    display:inline-block;
    width:14.2%;
    text-align: center;
    font-weight: bold;
}

.week{
    background-color: rgba(219, 232, 238, 1);
    margin-top: 20px;
    padding-bottom:10px;
    padding-top:5px;
    padding-left: 50px;
    padding-right: 50px;
}

.week .day{
    display:inline-block;
    width:14.2%;
    text-align: center;
}

.week .adjacent-month{
    color:transparent;
}

.week .calendar-dow-5 .value, .week .calendar-dow-6 .value{
    background-color: rgba(217, 217, 217, 1)
}

.week .value{
    height:70px;
    border-top: solid black 1px;
    border-left: solid black 1px;
    border-bottom: solid black 1px;
    margin-top: 5px;
    background-color: white;
}

.week .day:last-child .value {
  border-right: 1px solid black;
}

.cal-week-5 .day .adjacent-month:first-child .value{
    border-left: 1px solid black;
}

.week .adjacent-month .value{
    background-color: transparent;
    border: none;
}