JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="col-xs-12">


<!-- 4 Panels -->
<div class="col-xs-12 main_promo_wrap">
                                    <div class="col-xs-12 col-sm-3 main_promo_sub">
                                        <div class="col-xs-12 main_promo">
                                            <h4>Pay it up</h4>
                                            <p>Your monthly bill is:<br/>
                                                <span>$315.00</span>
                                            </p>

                                            <button class="btn btn-primary col-xs-12">Pay now <span class="outside-link"></span></button>
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-3 main_promo_sub_two">
                                        <div class="col-xs-12 main_promo">
                                            <h4>Change your Life</h4>
                                            <p>Your current name is:<br/>
                                                <span>Doc Brown</span>
                                            </p>
                                            <button class="btn btn-secondary col-xs-12">Change PCP <span class="outside-link"></span></button>
                                        </div>
                                   ...

CSS

/*-- Panel-Cluster --*/
.main_promo_wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;;
    border: solid 1px #ddd;
    padding: 15px;
    margin-bottom: 15px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    padding-top: 15px;
    padding-bottom: 0;
    padding-left: -15px;
    padding-right: -15px;
}

.main_promo {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-bottom: 15px;
    border: solid 1px #ddd;
    padding: 15px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    padding-top: 0;
    padding-bottom: 15px;
}

.main_promo button { 
  margin-top: auto;
}

.main_promo h4 { 
    font-weight: bold;
    margin-top: 0;
    text-align: center;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 15px;
    background: #eff1fd;
    padding: 15px;
}

.main_promo p { text-align: center; flex-grow: 1; }

.main_promo p span { 
    font-size: 1.5em;
    font-weight: bold;
    line-height: 28px;
}

.main_promo_sub:first-child {
    display: flex;
    padding-right: 8px;
    padding-left: 0;
}

.main_promo_sub_two, .main_promo_sub_three {
    display: flex;
    padding-left: 8px;
    padding-right: 8px;
}

.main_promo_sub:last-child {
    display: flex;
    padding-left: 8px;
    padding-right: 0;
}


@media only screen and (max-width: 767px) {

    .bannner h1 { position: relative; }

    .main_promo_wrap {
        display: block;
    }

    .main_promo_sub:first-child {
        display: block;
        padding: 0;
    }

    .main_promo_sub_two, .main_promo_sub_three {
        display: block;
        padding: 0;
    }

    .main_promo_sub:last-child {
        display: block;
        padding: 0;
    }

}
/*-- Panel-Cluster --*/