<header>
   <h1>Pricing Table</h1>
   <p>Simple and clean pricing table</p>
</header>

<main>
   <div class="row">

     <!-- table -->
      <div class="col-md-3 col-md-push-1">
         <div class="table">
            <div class="table-header">
               <h2>Basic</h2>
               <h3><sup>$</sup>35<small>/mo.</small></h3>
            </div>
            <div class="table-body">
               <ul class="features list-unstyled">
                  <li><strong>5</strong> Users</li>
                  <li><strong>Unlimited</strong> Storage</li>
                  <li><strong>3</strong> E-mail accounts</li>
                  <li><strong>5</strong> Subdomains</li>
                  <li><strong>1GB</strong> Bandwidth</li>
               </ul>
               <div class="table-footer">
                  <a href="#" class="signup btn">Order Now</a>
               </div>
            </div>
         </div>
      </div><!-- end table -->

      <!-- table -->
      <div class="col-md-4 col-md-push-1 pro">
         <div class="table">
            <div class="table-header">
               <div class="ribbon">We <br> Recommend</div>
               <h2>Pro</h2>
               <h3><sup>$</sup>59<small>/mo.</small></h3>
            </div>
            <div class="table-body">
               <ul class="features list-unstyled">
                  <li><strong>10</strong> Users</li>
                  <li><strong>Unlimited</strong> Storage</li>
                  <li><strong>5</strong> E-mail accounts</li>
                  <li><strong>10</strong> Subdomains</li>
                  <li><strong>5GB</strong> Bandwidth</li>
               </ul>
            </div>
            <div class="table-footer">
               <a href="#" class="signup btn">Order Now</a>
            </div>
         </div>
      </div><!-- end table -->

     <!-- table -->
      <div class="col-md-3 col-md-push-1">
         <div class="table">
            <div class="table-header">
               <h2>Premium</h2>
               <h3><sup>$</sup>99<small>/mo.</small></h3>
            </div>
            <div class="table-body">
               <ul class="features list-unstyled">
                  <li><strong>Unlimited</strong> users</li>
                  <li><strong>Unlimited</strong> Storage</li>
                  <li><strong>10</strong> E-mail accounts</li>
                  <li><strong>unlimited</strong> Subdomains</li>
                  <li><strong>10GB</strong> Bandwidth</li>
               </ul>
            </div>
            <div class="table-footer">
               <a href="#" class="signup btn">Order Now</a>
            </div>
         </div>
      </div><!-- end table -->


   </div>
</main>

$bg-color: #eee
$main-color: #46beb3
$font: 'Open Sans', sans-serif

h1, h2, h3
   text-transform: uppercase
   margin: 10px 0


*, *::after, *::before
   box-sizing: border-box


body
   background: $bg-color
   overflow-x: hidden
   color: #555
   text-align: center
   font-family: $font

header
   padding: 30px 0

   h1
      font-size: 2.5em
      font-weight: 700
   p
      font-size: 1.1em

main
   padding: 30px 0

   .row > div
      padding: 0

   .row > div.pro .table
      border: 3px solid #fff
      border-bottom: none

   .table
      background: #fff
      padding: 0 5px
      overflow: hidden
      position: relative

      .ribbon
         background: $main-color
         color: #fff
         font-weight: 600
         font-size: .9em
         display: inline-block
         padding: 50px 40px 10px
         -webkit-transform: rotate(-45deg)
         transform: rotate(-45deg)
         position: absolute
         top: -29px
         left: -60px

      .table-header
         padding: 20px 0
         &::after
            content: ""
            width: 100%
            height: 1px
            background: $bg-color
            display: block
            margin-top: 20px

         h2
            font-size: 2.2em
            font-weight: 600
            color: $main-color

         h3
            font-size: 3em
            font-weight: 700
            small
               font-size: .4em
               text-transform: lowercase

            sup
               font-size: .5em
               font-weight: 400
               display: inline-block
               -webkit-transform: translateY(-10px)
               transform: translateY(-10px)

      .table-body
         ul li
            padding: 8px 0
            font-size: 1.1em
            color: #666

      a.signup
         padding: 10px 40px
         color: #fff
         background: $main-color
         border: 1px solid $main-color
         font-weight: 1.5em
         font-weight: 600
         text-transform: uppercase
         margin: 20px 0
         border-bottom: 3px solid darken($main-color, 10%)
         transition: all .3s
         -webkit-transition: all .3s
         &:hover
            -webkit-transform: translateY(3px)
            transform: translateY(3px)
            border-bottom: 3px solid transparent


@media screen and (min-width: 991px)
   .row > div.pro
      -webkit-transform: translateY(-33px)
      transform: translateY(-33px) 
      z-index: 90
      a.signup
         margin-top: 50px

      .table
         box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1), -2px 0 4px rgba(0, 0, 0, 0.1)


@media screen and (max-width: 991px)
   main
      .row > div
         padding: 0 40px