<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class='col-md-6'> <div class="table-responsive"> <div class="membership-pricing-table"> <table> <tbody><tr> <th class="plan-header plan-header-beneficios"> <div class="pricing-plan-name"></div> <div class="pricing-plan-price"> Beneficios </div> <div class="pricing-plan-period">Anuales</div> </th> <th class="plan-header plan-header-rosa"> <div class="pricing-plan-name">Plan Rosa</div> <div class="pricing-plan-price"> ^$990<span>.00</span> </div> <div class="pricing-plan-period">anual</div> </th> <th class="plan-header plan-header-verde"> <div class="pricing-plan-name">Plan Verde</div> <div class="pricing-plan-price"> ^$1,190<span>.00</span> </div> <div class="pricing-plan-period">anual</div> </th> <th class="plan-header plan-header-family"> <div class="pricing-plan-name">Plan azul</div> <div class="pricing-plan-price"> ^$1,390<span>.00</span> </div> <div class="pricing-plan-period">anual</div> </th> </tr> <tr> <td> Cobertura Contra Accidentes Dentro del Trabajo </td> <td> Hasta $25,000.00 MXN </td> <td> Hasta $25,000.00 MXN </td> <td> Hasta $25,000.00 MXN </td> </tr> <tr> <td>Consultas Médicas Telefónicas Ilimitadas</td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> <td><span class="icon-yes glyphicon glyphicon-ok-circle"></span></td> </tr> <tr> <td>Consultas de Doctor en Casa</td> <td>2 consultas gratis</td> <td>2 consultas gratis</td> <td>2 consultas gratis</td> </tr> <tr> <td>Consultas de Doctor en Consultorio</td> <td>2 consultas gratis</td> <td>2 consultas gratis</td> <td>2 consultas gratis</td> </tr> <tr> <td>Seguro de Vida</td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td>$25,000 MXN en caso de muerte accidental</td> <td>$25,000 MXN en caso de muerte accidental</td> </tr> <tr> <td> Consultas Médicas para 2 <br> Hijos Menores de 24 Años </td> <td><span class="icon-no glyphicon glyphicon-remove-circle"></span></td> <td> <span class="icon-no glyphicon glyphicon-remove-circle"></span> </td> <td> <ul> <li> 2 consultas de Doctor en casa </li> <li> 2 consultas de Doctor en consultorio </li> </ul> </td> </tr> <tr> <td> </td> <td class="action-header"> <a class="btn btn-info btn-rosa"> ¡Lo quiero! </a> </td> <td class="action-header"> <a class="btn btn-info btn-verde"> ¡Lo quiero¡ </a> </td> <td class="action-header"> <a class="btn btn-info btn-family"> ¡Lo quiero¡ </a> </td> </tr> </tbody></table> </div> </div> </div>

.membership-pricing-table { box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important; width: 100%; } .membership-pricing-table table .icon-no,.membership-pricing-table table .icon-yes { font-size: 22px } .membership-pricing-table table .icon-no { color: #E53935 } .membership-pricing-table table .icon-yes { color: #26A69A } .membership-pricing-table table .plan-header { text-align: center; font-size: 48px; border: 1px solid #e2e2e2; padding: 25px 0 } .membership-pricing-table table .plan-header-rosa { background-color:#a42f79; color: #ffffff } .btn-rosa{ background-color:#a42f79; border-color:#a42f79 !important; } .btn-rosa:hover{ background-color:#a42f89; } .membership-pricing-table table .plan-header-verde { color: #fff; background-color: #3e9c76; border-color: #3e9c76 } .btn-verde{ background-color: #3e9c76; border-color: #3e9c76 } .btn-verde:hover{ background-color: #3e9176; border-color: #3e9c76 } .membership-pricing-table table .plan-header-family { color: #fff; background-color: #26a1c8; border-color: #26a1c8 } .btn-family{ color: #fff; background-color: #26a1c8; border-color: #26a1c8 } .btn-family:hover{ background-color: #26a1d8; } .membership-pricing-table table .plan-header-beneficios{ color: #6f7b8a; background-color: #fafafa; border-color: #fafafa } .membership-pricing-table table td { text-align: center; width: 15%; padding: 7px 10px; background-color: #fafafa; font-size: 14px; -webkit-box-shadow: 0 1px 0 #fff inset; box-shadow: 0 1px 0 #fff inset } .membership-pricing-table table,.membership-pricing-table table td { border-bottom: 1px solid #ebebeb } .membership-pricing-table table tr td:first-child { background-color: #fafafa; text-align: right; width: 24% } .membership-pricing-table table tr td:nth-child(5) { background-color: #FFF } .membership-pricing-table table tr:first-child td,.membership-pricing-table table tr:nth-child(2) td { -webkit-box-shadow: none; box-shadow: none } .membership-pricing-table table tr:first-child th:first-child { border-top-color: transparent; border-left-color: transparent; border-right-color: #e2e2e2 } .membership-pricing-table table tr:first-child th .pricing-plan-name { font-size: 22px } .membership-pricing-table table tr:first-child th .pricing-plan-price { line-height: 35px } .membership-pricing-table table tr:first-child th .pricing-plan-price>sup { font-size: 45% } .membership-pricing-table table tr:first-child th .pricing-plan-price>span { font-size: 30% } .membership-pricing-table table tr:first-child th .pricing-plan-period { margin-top: -7px; font-size: 25%; line-height: 40px; } .membership-pricing-table table .header-plan-inner { position: relative } .membership-pricing-table table .recommended-plan-ribbon { box-sizing: content-box; background-color: #dc3b5d; color: #FFF; position: absolute; padding: 3px 6px; font-size: 11px!important; font-weight: 500; left: -6px; top: -22px; z-index: 99; width: 100%; -webkit-box-shadow: 0 -1px #c2284c inset; box-shadow: 0 -1px #c2284c inset; text-shadow: 0 -1px #c2284c } .membership-pricing-table table .recommended-plan-ribbon:before { border: solid; border-color: #c2284c transparent; border-width: 6px 0 0 6px; bottom: -5px; content: ""; left: 0; position: absolute; z-index: 90 } .membership-pricing-table table .recommended-plan-ribbon:after { border: solid; border-color: #c2284c transparent; border-width: 6px 6px 0 0; bottom: -5px; content: ""; right: 0; position: absolute; z-index: 90 } .membership-pricing-table table .plan-head { box-sizing: content-box; background-color: #ff9c00; border: 1px solid #cf7300; position: absolute; top: -33px; left: -1px; height: 30px; width: 100%; border-bottom: none } .asterisk-note{ font-size:12px; font-weight:bold; }