Pricing Cards

<div class="single-page pricing-page py-5">
        <div class="fui-container">
            <div class="row">
                
                <!-- SINGLE PRICE -->
                <div class="col-md-4 col-sm-6 col-12 mb-2">
                  <div class="fui-card">
                    <div class="fui-card-header text-white text-center py-2 bg-dark">
                      <h2 class="fui-card-title mb-1">$ 0</h2>
                      <h4 class="fui-card-title mb-1">FREE TRAIL</h4>
                    </div>
                    <div class="fui-card-body text-center py-4" style="height: 250px">
                      <p class="weight-500">Option 1</p>
                      <p class="weight-500">Option 2</p>
                      <p class="weight-500">Option 3</p>
                      <p class="weight-500">Option 4</p>
                      <p class="weight-500">Option 5</p>
                    </div>
                    <div class="fui-card-footer">
                      <a href="" class="fui-btn fui-btn-dark w-100 py-2">SELECT</a>
                    </div>
                  </div>
                </div>

                <!-- SINGLE PRICE -->
                <div class="col-md-4 col-sm-6 col-12 mb-2">
                  <div class="fui-card">
                    <div class="fui-card-header text-white text-center py-2 bg-primary">
                       <h2 class="fui-card-title mb-1">$ 25</h2>
                      <h4 class="fui-card-title mb-1">BUSINESS PARTNER</h4>
                    </div>
                    <div class="fui-card-body text-center py-4" style="height: 250px">
                      <p class="weight-500">Option 1</p>
                      <p class="weight-500">Option 2</p>
                      <p class="weight-500">Option 3</p>
                      <p class="weight-500">Option 4</p>
                      <p class="weight-500">Option 5</p>
                    </div>
                    <div class="fui-card-footer">
                      <a href="" class="fui-btn fui-btn-primary w-100 py-2">SELECT</a>
                    </div>
                  </div>
                </div>

                <!-- SINGLE PRICE -->
                <div class="col-md-4 col-sm-6 col-12 mb-2">
                  <div class="fui-card">
                    <div class="fui-card-header text-white text-center py-2 bg-dark">
                      <h2 class="fui-card-title mb-1">$ 45</h2>
                      <h4 class="fui-card-title mb-1">PRO PARTNER</h4>
                    </div>
                    <div class="fui-card-body text-center py-4" style="height: 250px">
                      <p class="weight-500">Option 1</p>
                      <p class="weight-500">Option 2</p>
                      <p class="weight-500">Option 3</p>
                      <p class="weight-500">Option 4</p>
                      <p class="weight-500">Option 5</p>
                    </div>
                    <div class="fui-card-footer">
                      <a href="" class="fui-btn fui-btn-dark w-100 py-2">SELECT</a>
                    </div>
                  </div>
                </div>

            </div>
        </div>

    </div>
.bg-dark {
  background: #555 !important;
}

.bg-primary {
  background: #008cff !important;
}
Dependencies
CSS

Insert before the closing </head> tag

<!-- Icon Famous -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/icon-famous/1.0.0-beta.2/iconfamous.css">
<!-- Famous UI -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.css">
Javascript

Insert before the closing </body> tag

<!-- jQuery -->
<script src="https://cdn.boomcdn.com/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Famous UI -->
<script src="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.js"></script>