JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-lg-7 ml-auto">
  <div class="seventh_blocks text-center d-flex">

    <div class="seventh_block">
      <h3 class="seventh_block_title">Starter</h3>
      <span class="seventh_block_price">Free</span>
      <p class="seventh_block_text">Build your schedule<br> every day</p>
      <div class="seventh_block_list">Unlimeted events</div>
      <div class="seventh_block_list">Connect Dropbox & Evernote</div>
      <button class="seventh_block_btn seventh_block_btn_margin">Get started</button>
    </div>

    <div class="seventh_block seventh_block_active">
      <h3 class="seventh_block_title">Pro</h3>
      <span class="seventh_block_price">$4.99</span>
      <p class="seventh_block_text">Make your life<br> better
      </p>
      <div class="seventh_block_list">Unlimeted events</div>
      <div class="seventh_block_list">Connect Dropbox & Evernote</div>
      <div class="seventh_block_list">Personal Assistant</div>
      <button class="seventh_block_btn">Make me a Pro</button>
    </div>

  </div>
</div>

CSS

.seventh_blocks {
  padding: 1px
}

.seventh_block {
  border: 1px solid #d3d3d3;
  border-radius: 15px;
  margin: 50px auto;
  background: #fff;
  padding: 60px 40px
}

.seventh_block_active {
  background: #ebebed;
  box-shadow: 0 0 15px #d3d3d3;
  transform: scale(1.1)
}

.seventh_block_title {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 30px
}

.seventh_block_price {
  border: 1px solid #d4d4d5;
  border-radius: 30px;
  padding: 5px 17px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 25px;
  margin-bottom: 50px
}

.seventh_block_text {
  font-size: 20px;
  color: #8c8f94;
  margin-top: 50px;
  margin-bottom: 30px
}

.seventh_block_list {
  font-size: 16px;
  margin-bottom: 25px
}

.seventh_block_list:before {
  font-family: FontAwesome;
  content: '\f00c';
  color: #6fc754;
  margin-right: 7px
}

.seventh_block_btn {
  padding: 5px 0;
  width: 210px;
  border-radius: 40px;
  background: 0 0;
  border: 1px solid #267df4;
  margin-top: 50px;
  color: #267df4
}

.seventh_block_btn_margin {
  margin-top: 99px
}