JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<div class="long-calendar calendar-flex">
  <div class="calendar-list-content calendar-row">
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>aaaa1</div>
    <div>aaaa2adasda</div>
    <div>aaaa3dasdada</div>
    <div>aaaa4dasdad</div>
    <div>aaaa5dasdsad</div>
    <div>aaaa6dasdsa</div>
    <div>aaaa7dasdsa</div>
    <div>aaaa8dadsaasd</div>
  </div>
  <div class="calendar-content calendar-flex">
    <div class="calendar-current-month calendar-row">
      <div class="calendar-title calendar-flex">
        <div>←</div>
        <div>yyyy/mm</div>
      </div>
      <div class="calendar-days calendar-flex">
        <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>
      <div class="calendar-days calendar-flex">
        <div class="day">&nbsp;</div>
        <div class="day">&nbsp;</div>
        <div class="day">&nbsp;</div>
        <div class="day">&nbsp;</div>
        <div class="day">&nbsp;</div>
        <div class="day">&nbsp;</div>
        <div class="day">&nbsp;</div>
        <div class="day">&nbsp;</div>
        <div class="day">&nbsp;</div>
        <div...

CSS

.long-calendar {
  width: 1200px;
  height: 250px;
  background-color: steelblue;
}

.calendar-flex {
  display: flex;
}
.calendar-row {
  display: flex;
  flex-direction: column;
}

.calendar-list-content {
  flex-grow: 1;
  background-color: cyan;
  width: 150px;
}

.calendar-content {
  flex-grow: 9;
  background-color: teal;
}

.calendar-left,
.calendar-right {
  flex-grow: 1;
}
.calendar-current-month,
.calendar-next-month {
  flex-grow: 5;
}

.calendar-current-month {
  background-color: red;
}
.calendar-next-month {
  background-color: green;
}

.day {
  width: 25px;
  font-size: 14px;
  flex-grow: 0.5;
  border: 1px solid;
}