<div class="container">
  <div class="year-month-container">
    <h2 class="year-month year-month--desktop">
      Jan <br> 2020
    </h2>
  </div>
  <div class="calendar-container">
    <h2 class="year-month year-month-mobile">
      Jan 2020
    </h2>
    <div class="calendar">
      <table class="calendar__grid">
        <thead>
          <tr>
            <th>S</th>
            <th>M</th>
            <th>T</th>
            <th>W</th>
            <th>T</th>
            <th>F</th>
            <th>S</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="3"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
          </tr>
          <tr>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
          </tr>
          <tr>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
          </tr>
          <tr>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>21</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="calendar__controls-container">
      <button class="calendar__control-date calendar__control-date--back">
        <i class="fas fa-chevron-left"></i>
      </button>
      <button class="calendar__control-date calendar__control-date--next">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>
  </div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
$yellow: #f0eb60;
$desktop-breakpoint: 1000px;

* {
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;

  background: url("https://cdn.pixabay.com/photo/2016/08/12/20/43/chicago-1589647_960_720.jpg")
    no-repeat;
  background-size: cover;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
  width: 100%;
  max-width: 1200px;

  padding: 270px 86px;

  @media screen and(min-width: $desktop-breakpoint) {
    justify-content: space-between;
  }
}

.year-month {
  font-family: "Montserrat", sans-serif;
  color: $yellow;

  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.year-month-container {
  display: none;
  align-items: center;
  justify-content: center;

  width: 40%;
  margin-right: 86px;

  @media screen and(min-width: $desktop-breakpoint) {
    display: flex;
  }
}
.year-month--desktop {
  margin: 0;

  font-size: 7.5rem;
  text-align: center;

  @media screen and(min-width: 1200px) {
    font-size: 9.2rem;
  }
}

.calendar-container {
  width: 100%;
  min-width: 480px;
  max-width: 600px;

  @media screen and(min-width: 1000px) {
    width: 60%;
  }
}
.year-month-mobile {
  text-align: right;
  letter-spacing: 6px;

  @media screen and(min-width: $desktop-breakpoint) {
    display: none;
  }
}

.calendar {
  padding: 55px;

  border: 0.5em solid #fff;
}
.calendar__grid {
  width: 100%;
  height: 100%;

  font-size: 1.4rem;
  text-align: center;
  line-height: 2.87rem;

  cursor: pointer;
  thead {
    color: $yellow;
    font-weight: 700 !important;
  }
  td {
    color: #fff;
    &:hover {
      color: darken($yellow, 15%);
    }
  }
}

.calendar__controls-container {
  display: flex;
  justify-content: flex-end;

  padding-top: 16px;
  padding-right: 8px;
}
.calendar__control-date {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 25px;
  height: 25px;

  border: none;
  border-radius: 50%;
  border-color: $yellow;

  background-color: $yellow;

  &:focus {
    outline: none;
  }
}
.calendar__control-date--next {
  margin-left: 5px;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.