JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='appointment-confirmation-box'>
  <h4 class='appointment-confirmation-box__title'>
    Please confirm the appointment time change
  </h4>
  <dl class='appointment-details'>
    <div class='appointment-detail'>
      <dt class='appointment-detail__title'>
        Old time
      </dt>
      <dd class='appointment-detail__description'>
        Monday - March 7, 2020, 10:45am
      </dd>
    </div>

    <div class='appointment-detail'>
      <dt class='appointment-detail__title'>
        New time
      </dt>
      <dd class='appointment-detail__description'>
        Wednesday - March 9, 2020, 11:10am
      </dd>
    </div>
  </dl>
  
  <section class='appointment-confirmation-box__actions'>
    <button class='button primary'>
      Confirm
    </button>
  </section>
</div>

SCSS

body {
  margin: 0;
  font-family: helvetica;
}

.appointment-confirmation-box {
  width: 500px;
  padding: 15px 50px 40px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 20px;
}

.appointment-confirmation-box__title {
  font-size: 23px;
  font-weight: 100;
  line-height: 30px;
}

.appointment-detail {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
}

.appointment-detail__title {
  flex-grow: 0;
  flex-shrink: 0;
  font-weight: bold;
  width: 90px;
}

.appointment-detail__description {
  margin: 0;
  line-height: 25px;
}

.appointment-confirmation-box__actions {
  margin-top: 30px;
  text-align: center;
}

.button {
  padding: 10px 20px 11px;
  border-radius: 5px;
  background: teal;
  color: white;
  border: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  font-size: 14px;
}