<div class="calendar">
    <div class="calendar__weekday">Sun</div>
    <div class="calendar__weekday">Mon</div>
    <div class="calendar__weekday">Tue</div>
    <div class="calendar__weekday">Wed</div>
    <div class="calendar__weekday">Thu</div>
    <div class="calendar__weekday">Fri</div>
    <div class="calendar__weekday">Sat</div>

    <!-- Week 1 -->
    <div class="calendar__day">29</div>
    <div class="calendar__day">30</div>
    <div class="calendar__day">31</div>
    <div class="calendar__day">1</div>
    <div class="calendar__day">2</div>
    <div class="calendar__day">3</div>
    <div class="calendar__day">4</div>

    <!-- Week 2 -->
    <div class="calendar__day">5</div>
    <div class="calendar__day">6</div>
    <div class="calendar__day">7</div>
    <div class="calendar__day">8</div>
    <div class="calendar__day">9</div>
    <div class="calendar__day">10</div>
    <div class="calendar__day">11</div>

    <!-- Week 3 -->
    <div class="calendar__day">12</div>
    <div class="calendar__day">13</div>
    <div class="calendar__day">14</div>
    <div class="calendar__day">15</div>
    <div class="calendar__day">16</div>
    <div class="calendar__day">17</div>
    <div class="calendar__day">18</div>

    <!-- Week 4 -->
    <div class="calendar__day">19</div>
    <div class="calendar__day">20</div>
    <div class="calendar__day">21</div>
    <div class="calendar__day">22</div>
    <div class="calendar__day">23</div>
    <div class="calendar__day">24</div>
    <div class="calendar__day">25</div>

    <!-- Week 5 -->
    <div class="calendar__day">26</div>
    <div class="calendar__day">27</div>
    <div class="calendar__day">28</div>
    <div class="calendar__day">29</div>
    <div class="calendar__day">30</div>
    <div class="calendar__day">1</div>
    <div class="calendar__day">2</div>
</div>

body {
    color: rgb(51 65 85);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* {
    box-sizing: border-box;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 2rem repeat(5, 5rem);

    border-left: 1px solid rgb(203 213 225);
    border-top: 1px solid rgb(203 213 225);
    border-right: 1px solid rgb(203 213 225);

    width: 100%;
}

.calendar__weekday {
    border-bottom: 1px solid rgb(203 213 225);

    justify-content: center;
    align-items: center;
    display: flex;

    padding: 0.5rem 0;
    text-transform: uppercase;
}

.calendar__day {
    border-bottom: 1px solid rgb(203 213 225);
    border-right: 1px solid rgb(203 213 225);
    font-size: 0.75rem;
    padding: 0.5rem;
    text-align: right;
}
.calendar__day:nth-child(7n + 7) {
    border-right: 0;
}