<div class="container">

  <section class="mx-auto my-5" style="max-width: 23rem;">

    <div class="card card-form md-calendar">

      <div class="card-body rounded-top text-white pe-0">

        <h3 class="font-weight-bold text-center text-white mt-4 mb-5 pb-3">MDB Calendar</h3>

        <div class="my-4">

          <ul class="list-unstyled d-flex justify-content-between me-4">

            <li class="h4">October</li>

            <li class="text-white-50 mt-2">2018</li>

          </ul>

        </div>

        <ul class="list-unstyled weekdays text-white-50">

          <li>Mo</li>

          <li>Tu</li>

          <li>We</li>

          <li>Th</li>

          <li>Fr</li>

          <li>Sa</li>

          <li>Su</li>

        </ul>

        <ul class="list-unstyled days">

          <li>1</li>

          <li>2</li>

          <li>3</li>

          <li>4</li>

          <li>5</li>

          <li>6</li>

          <li>7</li>

          <li>8</li>

          <li>9</li>

          <li>10</li>

          <li class="active rounded-left">11</li>

          <li class="active">12</li>

          <li class="active">13</li>

          <li class="active">14</li>

          <li class="active rounded-left">15</li>

          <li class="active">16</li>

          <li class="active">17</li>

          <li class="active">18</li>

          <li class="active">19</li>

          <li class="active">20</li>

          <li class="active">21</li>

          <li class="active">22</li>

          <li class="active">23</li>

          <li class="active">24</li>

          <li class="active rounded-right">25</li>

          <li>26</li>

          <li>27</li>

          <li>28</li>

          <li>29</li>

          <li>30</li>

          <li>31</li>

        </ul>

      </div>

      <div class="card card-form-2">

        <div class="card-body">

          <h6 class="mt-2 mb-4 font-weight-bold">My calendars</h6>

          <div class="form-check red-checkbox mb-3">

            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1" checked />

            <label class="form-check-label" for="flexCheckDefault1">

              Joe Doe

            </label>

          </div>

          <div class="form-check purple-checkbox mb-3">

            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2" />

            <label class="form-check-label" for="flexCheckDefault2">

              Company calendar

            </label>

          </div>

          <div class="form-check blue-checkbox mb-3">

            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3" checked />

            <label class="form-check-label" for="flexCheckDefault3">

              To-Do list

            </label>

          </div>

          <div class="form-check teal-checkbox mb-3">

            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4" checked />

            <label class="form-check-label" for="flexCheckDefault4">

              Reminders

            </label>

          </div>

          <div class="form-check unique-checkbox mb-3">

            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5" />

            <label class="form-check-label" for="flexCheckDefault5">

              Reminders

            </label>

          </div>

        </div>

      </div>

    </div>

  </section>

</div>

body {

  background-color: #f5f7fa;

}

​

.md-calendar {

  background-color: #69004b;

}

​

.md-calendar .weekdays,

.md-calendar .days {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: start;

  -webkit-justify-content: flex-start;

  -ms-flex-pack: start;

  justify-content: flex-start;

  -webkit-flex-wrap: wrap;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

​

.md-calendar .weekdays li,

.md-calendar .days li {

  text-align: center;

  width: 13.6%;

  padding: 0.9rem 0;

}

​

.md-calendar .days li {

  margin-bottom: 0.5rem;

  font-size: 0.9rem;

}

​

.md-calendar .days li.active {

  background-color: #fb0025;

}

​

.md-calendar .days li.active.rounded-right {

  -webkit-border-top-right-radius: 50% !important;

  border-top-right-radius: 50% !important;

  -webkit-border-bottom-right-radius: 50% !important;

  border-bottom-right-radius: 50% !important;

}

​

.md-calendar .days li.active.rounded-left {

  -webkit-border-top-left-radius: 50% !important;

  border-top-left-radius: 50% !important;

  -webkit-border-bottom-left-radius: 50% !important;

  border-bottom-left-radius: 50% !important;

}

​

.md-calendar .form-check,

.card-form .form-check {

  margin-left: .32rem;

}

​

.red-checkbox .form-check-input[type=checkbox]:checked {

  background-color: #fb0025;

}

​

.red-checkbox .form-check-input:checked {

  border-color: #fb0025;

}

​

.red-checkbox .form-check-input:checked:focus:before {

  box-shadow: 0 0 0 13px #fb0025;

}

​

.purple-checkbox .form-check-input[type=checkbox]:checked {

  background-color: #69004b;

}

​

.purple-checkbox .form-check-input:checked {

  border-color: #69004b;

}

​

.purple-checkbox .form-check-input:checked:focus:before {

  box-shadow: 0 0 0 13px #69004b;

}

​

.blue-checkbox .form-check-input[type=checkbox]:checked {

  background-color: #0d47a1;

}

​

.blue-checkbox .form-check-input:checked {

  border-color: #0d47a1;

}

​

.blue-checkbox .form-check-input:checked:focus:before {

  box-shadow: 0 0 0 13px #0d47a1;

}

​

.teal-checkbox .form-check-input[type=checkbox]:checked {

  background-color: #00695c;

}

​

.teal-checkbox .form-check-input:checked {

  border-color: #00695c;

}

​

.teal-checkbox .form-check-input:checked:focus:before {

  box-shadow: 0 0 0 13px #00695c;

}

​

.unique-checkbox .form-check-input[type=checkbox]:checked {

  background-color: #3f729b;

}

​

.unique-checkbox .form-check-input:checked {

  border-color: #3f729b;

}

​

.unique-checkbox .form-check-input:checked:focus:before {

  box-shadow: 0 0 0 13px #3f729b;

}

const card = document.querySelector('.map-card');

const cardBody = card.querySelector('.card-body')

​

card.addEventListener('click', () => {

  cardBody.classList.toggle('closed')

})