Responsive Pricing Table

<div class="col-sm-6 col-md-4">
    <div class="price-item">
                        <div class="info">
                            <h3>Sambha</h3>
                            <p class="desc">For Single Use</p>
                            <p class="price">$49.00</p>
                        </div>
                          <div class="features">
                            <ul>
                                <li>100 Projects</li>
                                <li>30 GB Storage</li>
                                <li>15 Workspaces</li>
                                <li>Private Forums</li>
                                <li>Enhanced Security</li>
                            </ul>
                          </div>
                       <a class="btn green-bg" href="#">Start Trial</a>
                    </div>
          </div>
          <div class="col-sm-6 col-md-4">
    <div class="price-item featured">
                        <div class="info">
                            <h3>Gabbar Singh</h3>
                            <p class="desc">For Business Uses</p>
                            <p class="price">$249.00</p>
                        </div>
                          <div class="features">
                            <ul>
                                <li>100 Projects</li>
                                <li>30 GB Storage</li>
                                <li>15 Workspaces</li>
                                <li>Private Forums</li>
                                <li>Enhanced Security</li>
                            </ul>
                          </div>
                       <a class="btn red-bg btn-lg" href="#">Start Trial</a>
                    </div>
          </div>
          <div class="col-sm-6 col-md-4">
    <div class="price-item">
                        <div class="info">
                            <h3>Kalia</h3>
                            <p class="desc">For Individual Uses</p>
                            <p class="price">$149.00</p>
                        </div>
                          <div class="features">
                            <ul>
                                <li>100 Projects</li>
                                <li>30 GB Storage</li>
                                <li>15 Workspaces</li>
                                <li>Private Forums</li>
                                <li>Enhanced Security</li>
                            </ul>
                          </div>
                       <a class="btn green-bg" href="#">Start Trial</a>
                    </div>
          </div>

@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');
      body { font-family: 'Roboto', sans-serif; }
       

.price-item {
    margin-top: 30px;
    padding: 60px 30px;
    text-align: center;
    position: relative;
    border-radius: 10px;
    transition: 0.3s ease-out;
    box-shadow: 0px 20px 50px 0px rgba(153, 153, 153, 0.1);
}

.price-item ul {
    margin-left: 0;
    list-style: none;
    padding-left: 0px;
}

.price-item h3 {
    margin-top: 0px; font-family: 'Anton', sans-serif; text-transform:uppercase; font-size:35px;
}

.price-item p.desc {}

.price span {
    font-size: 15px;
    color: #777;
}

.price-item p.price {
    margin-top: 35px;
    font-size: 42px;
    font-weight: 500;
    line-height: 42px;
    color: rgb(102,204,153);
    text-shadow: 0px 5px 10px rgba(102, 204, 153, 0.3); font-family: 'Anton', sans-serif;
}

.price-item.featured .price {
    color: rgb(255,101,165);
    text-shadow: 0px 5px 20px rgba(255, 101, 165, 0.3);
}

.price-item .features {
    margin: 30px 0;
}

.price-item .features li {
    padding: 5px 0;
}

.price-item a.btn {
    display: inline-block;
}
.price-item.featured .price {
    color: rgb(255,101,165);
    text-shadow: 0px 5px 20px rgba(255, 101, 165, 0.3);
}
.red-bg {
    box-shadow: 0px 10px 15px 0px rgba(255, 101, 165, 0.3); 
    background: rgb(255,101,165);
    background: -moz-linear-gradient(45deg,  rgba(255,101,165,1) 0%, rgba(255,101,165,1) 13%, rgba(255,107,154,1) 35%, rgba(255,134,106,1) 100%);
    background: -webkit-linear-gradient(45deg,  rgba(255,101,165,1) 0%,rgba(255,101,165,1) 13%,rgba(255,107,154,1) 35%,rgba(255,134,106,1) 100%);
    background: linear-gradient(45deg,  rgba(255,101,165,1) 0%,rgba(255,101,165,1) 13%,rgba(255,107,154,1) 35%,rgba(255,134,106,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff65a5', endColorstr='#ff866a',GradientType=1 ); color:#fff;
}
.green-bg {
    box-shadow: 0px 10px 15px 0px rgba(102, 204, 150, 0.3);
    background: rgb(102,204,153);
    background: -moz-linear-gradient(45deg,  rgba(102,204,153,1) 0%, rgba(108,205,148,1) 19%, rgba(136,209,125,1) 72%, rgba(146,211,117,1) 100%);
    background: -webkit-linear-gradient(45deg,  rgba(102,204,153,1) 0%,rgba(108,205,148,1) 19%,rgba(136,209,125,1) 72%,rgba(146,211,117,1) 100%);
    background: linear-gradient(45deg,  rgba(102,204,153,1) 0%,rgba(108,205,148,1) 19%,rgba(136,209,125,1) 72%,rgba(146,211,117,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66cc99', endColorstr='#92d375',GradientType=1 ); color:#fff;
}