Flex Bootstrap Pricing Table

by Grobbert

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
  <div class="row flex-items-xs-middle flex-items-xs-center">

    <!-- Table #1  -->
    <div class="col-xs-12 col-lg-4">
      <div class="card text-xs-center">
        <div class="card-header">
          <h3 class="display-2"><span class="currency">$</span>19<span class="period">/month</span></h3>
        </div>
        <div class="card-block text-center">
          <h4 class="card-title"> 
            Basic Plan
          </h4>
          <ul class="list-group">
            <li class="list-group-item">Ultimate Features</li>
            <li class="list-group-item">Responsive Ready</li>
            <li class="list-group-item">Visual Composer Included</li>
            <li class="list-group-item">24/7 Support System</li>
          </ul>
          <a href="#" class="btn btn-gradient mt-2">Choose Plan</a>
        </div>
      </div>
    </div>

    <!-- Table #1  -->
    <div class="col-xs-12 col-lg-4">
      <div class="card text-xs-center">
        <div class="card-header">
          <h3 class="display-2"><span class="currency">$</span>29<span class="period">/month</span></h3>
        </div>
        <div class="card-block text-center">
          <h4 class="card-title"> 
            Regular Plan
          </h4>
          <ul class="list-group">
            <li class="list-group-item">Ultimate Features</li>
            <li class="list-group-item">Responsive Ready</li>
            <li class="list-group-item">Visual Composer Included</li>
            <li class="list-group-item">24/7 Support...

SCSS

// Imports
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

// Varibles
$main-font: "Roboto", sans-serif;
$primary-color: #57e2b2;
$light-gray: #f8f8f8;
$main-font-color: #808080;
$main-font-weight: 300;

// Basic
body {
  background-color: $light-gray;
  font-family: $main-font;
  font-weight: $main-font-weight;
}

.row {
  min-height: 100vh;
}

// Tables
.card {
  border: 0;
  border-radius: 0px;
  -webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 3px 0px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  padding: 2.25rem 0;
  position: relative;
  will-change: transform;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 5px;
    background-color: $primary-color;
    transition: 0.5s;
  }

  &:hover {
    transform: scale(1.05);
    -webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.08);

    &:after {
      width: 100%;
    }
  }
  & .card-header {
    background-color: white;
    padding-left: 2rem;
    border-bottom: 0px;
  }
  & .card-title {
    margin-bottom: 1rem;
  }
  & .card-block {
    padding-top: 0;
  }
  & .list-group-item {
    border: 0px;
    padding: 0.25rem;
    color: $main-font-color;
    font-weight: $main-font-weight;
  }
}

// Price
.display-2 {
  font-size: 7rem;
  letter-spacing: -0.5rem;
  & .currency {
    font-size: 2.75rem;
    position: relative;
    font-weight: $main-font-weight + 100;
    top: -45px;
    letter-spacing: 0px;
  }
  & .period {
    font-size: 1rem;
    color: lighten($main-font-color, 20%);
    letter-spacing: 0px;
  }
}

// Buttons
.btn {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: $main-font-weight + 200;
  color: lighten($main-font-color, 15%);
  border-radius: 0;
  padding: 0.75rem 1.25rem;
  letter-spacing: 1px;
}

.btn-gradient {
  background-color: #f2f2f2;
  transition: background 0.3s ease-in-out;

  &:hover {
   ...