<!-- 

Created by http://samfleming.me based on designs found on Dribble by the Balkan Brothers

https://dribbble.com/shots/2047235-Conference-Calling-Pricing?list=likes&offset=0

-->

<div class="plans">
  <div class="box">
    <div class="title">Unlimited</div>
    <div class="price fancy-bg">
      $19
    </div>
    <small class="fancy-bg">/month</small>
    <ul class="features">
      <li>Unlimited for <strong>15 Callers</strong></li>
      <li>Host as many conference calls as you want for just $19.00 a month!</li>
    </ul>
    <div>
      <a href="#" class="btn btn-default">Select Plan</a>
    </div>
  </div>
  <div class="box">
    <div class="title">Unlimited XL</div>
    <div class="price fancy-bg">
      $39
    </div>
    <small class="fancy-bg">/month</small>
    <ul class="features">
      <li>Unlimited for <strong>50 Callers</strong></li>
      <li>Host as many conference calls as you want for just $39.00 a month!</li>
    </ul>
    <div>
      <a href="#" class="btn btn-default">Select Plan</a>
    </div>
  </div>
  <div class="box">
    <div class="title">PAY AS YOU GO</div>
    <div class="price fancy-bg">
      2¢
    </div>
    <small class="fancy-bg">minute/line</small>
    <ul class="features">
      <li>Maximum of <strong>300 Callers</strong></li>
      <li>Dedicated dial-in with no minimums - 2¢ Tool or 5¢ Toll-Free (per minute/line)</li>
    </ul>
    <div>
      <a href="#" class="btn btn-primary">Select Plan</a>
    </div>
  </div>
</div>
body {
  background: #8bbec9;
  background: -moz-linear-gradient(left, #8bbec9 0%, #97cbd6 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#8bbec9), color-stop(100%,#97cbd6)); 
  background: -webkit-linear-gradient(left, #8bbec9 0%,#97cbd6 100%); 
  background: -o-linear-gradient(left, #8bbec9 0%,#97cbd6 100%); 
  background: -ms-linear-gradient(left, #8bbec9 0%,#97cbd6 100%); 
  background: linear-gradient(to right, #8bbec9 0%,#97cbd6 100%);
  font-family: 'Open Sans', Helvetica, Arial, Sans-serif;
}

.plans {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: wrap;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
  width: 785px;
  margin: 0 auto;
}

.box {
  margin: 5px;
  background-color: #fff;
  padding: 25px 2%;
  text-align: center;
  width: 25%;
  border-radius: 3px;
}
.title {
  display: block;
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 10px;
  color: #53535b;
  font-weight: 200;
}
.price {
  font-size: 48px;
  font-weight: bold;
  display: inline-block;
}
small {
  font-size: 14px;
  display: block;
  margin-top: -8px;
}
.fancy-bg {
  color: #6c9cdd;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(40deg, #9385de, #3fb7db);
  background-image: -webkit-linear-gradient(transparent, transparent),linear-gradient(50deg, #9385de, #3fb7db);
  -webkit-background-clip: text;
}
.features {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  font-size: 14px;
}
.features li {
  color: #7c8a95;
  font-weight: 200;
  padding: 5px 15px;
}
.features strong {
  color: #53535b;
  font-weight: normal;
}

.btn {
  padding: 12px 36px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
}
.btn-default {
  background-color: #3db8db;
}
.btn-primary {
  background-color: #7f64b5;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.