JSFiddle - React, Tailwind, and code Playground

Pricing Table used in conjunction with Foundation 3

by chrisallenmoore

HTML

<div class="row pricing-wrap">
    <div class="three column">
        <ul class="pricing-table table-first">
            <li class="title">Free</li>
            <li class="price">FREE</li>
            <li class="description">Content...</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="button" href="#">Get it Now &raquo;</a>
            </li>
        </ul>
    </div>
    <div class="three column">
        <ul class="pricing-table table-second">
            <li class="title">Basic</li>
            <li class="price">$29.99</li>
            <li class="description">Content...</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="button" href="#">Buy it Now &raquo;</a>
            </li>
        </ul>
    </div>
    <div class="three column">
        <ul class="pricing-table price-highlight">
            <li class="title">Standard</li>
            <li class="price">$49.99</li>
            <li class="description">Content...</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="button" href="#">Buy it Now &raquo;</a>
            </li>
        </ul>
    </div>
    <div class="three column">
        <ul class="pricing-table table-last">
            <li class="title">Enterprise</li>
            <li class="price">$99.99</li>
            <li class="description">Content...</li>
            <li class="bullet-item">1 Database</li>
            <li class="bullet-item">5GB Storage</li>
            <li class="bullet-item">20 Users</li>
            <li class="cta-button"><a class="button" href="#">Buy it Now &raquo;</a>
           ...

SCSS

/* Sass Variables ----- *****/
$brand-color: #057d9f;
$table-bg-header: #5a5a5a;
$table-border: #5a5a5a;
$border-dark: 10%;
$border-light: 45%;
$box-shadow: #676767;

$test-color: red;
/* End Sass Variables ----- *****/

.pricing-wrap {
  .column {
    padding: 0;
    .pricing-table {
      border: none;

      .title {
        background: $table-bg-header;
        color: #fff;
      }
      &.table-first {
        li {
          &:first-child {
            border-top: 1px solid darken($table-bg-header, $border-dark);
            border-left: 1px solid darken($table-bg-header, $border-dark);
            border-bottom: 3px solid darken($table-bg-header, $border-dark);
          }
          &:last-child {
            border-bottom: 1px solid lighten($table-border, $border-light);
          }
          &:not(first-child) {
            border-left: 1px solid $table-border($table-border, $border-light);
          }
        }
      }
      &.table-second {
        li {
          &:first-child {
            border-top: 1px solid darken($table-bg-header, $border-dark);
            border-left: 1px solid darken($table-bg-header, $border-dark);
            border-bottom: 3px solid darken($table-bg-header, $border-dark);
          }
          &:last-child {
            border-bottom: 1px solid lighten($table-border, $border-light);
          }
          &:not(first-child) {
            border-left: 1px solid lighten($table-border, $border-light);
          }
        }
      }
      &.table-last {
        li {
          &:first-child {
            border-top: 1px solid darken($table-bg-header, $border-dark);
            border-left: 0px solid darken($table-bg-header, $border-dark);
            border-right: 1px solid darken($table-bg-header, $border-dark);
            border-bottom: 3px solid darken($table-bg-header, $border-dark);
          }
          &:last-child {
            border-bottom: 1px solid lighten($table-border, $border-light);
          }
         ...