JSFiddle - React, Tailwind, and code Playground

by princeofabyss

HTML

<div class="calendar">
  <div class="weekday">Mon</div>
  <div class="weekday">Tue</div>
  <div class="weekday">Wed</div>
  <div class="weekday">Thu</div>
  <div class="weekday">Fri</div>
  <div class="weekday">Sat</div>
  <div class="weekday">Sun</div>
  <div></div>
  <div></div>
  <div></div>
  <div class="day">1</div>
  <div class="day">2</div>
  <div class="day">3</div>
  <div class="day">4</div>
  <div class="day">5</div>
  <div class="day">6</div>
  <div class="day">7</div>
  <div class="day">8</div>
  <div class="day">9</div>
  <div class="day">10</div>
  <div class="day">11</div>
  <div class="day">12</div>
  <div class="day">13</div>
  <div class="day">14</div>
  <div class="day">15</div>
  <div class="day">16</div>
  <div class="day">17</div>
  <div class="day">18</div>
  <div class="day">19</div>
  <div class="day">20</div>
  <div class="day">21</div>
  <div class="day">22</div>
  <div class="day">23</div>
  <div class="day">24</div>
  <div class="day">25</div>
  <div class="day">26</div>
  <div class="day">27</div>
  <div class="day">28</div>
  <div class="day">29</div>
  <div class="day">30</div>
  <div class="day">31</div>
</div>

CSS

.calendar {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.day {
  padding: 5px 30px 30px 5px;
  color: white;
  background-color: #0074d9;
}

.weekday {
  padding: 10px 30px;
  color: white;
    background-color: #333;
}