<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container"> <div class="row"> <div class="col-xs-12 col-md-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> Bronze</h3> </div> <div class="panel-body"> <div class="the-price"> <h1> $10<span class="subscript">/mo</span></h1> <small>1 month FREE trial</small> </div> <table class="table"> <tr> <td> 1 Account </td> </tr> <tr class="active"> <td> 1 Project </td> </tr> <tr> <td> 100K API Access </td> </tr> <tr class="active"> <td> 100MB Storage </td> </tr> <tr> <td> Custom Cloud Services </td> </tr> <tr class="active"> <td> Weekly Reports </td> </tr> </table> </div> <div class="panel-footer"> <a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Sign Up</a> 1 month FREE trial</div> </div> </div> <div class="col-xs-12 col-md-3"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title"> Silver</h3> </div> <div class="panel-body"> <div class="the-price"> <h1> $20<span class="subscript">/mo</span></h1> <small>1 month FREE trial</small> </div> <table class="table"> <tr> <td> 2 Account </td> </tr> <tr class="active"> <td> 5 Project </td> </tr> <tr> <td> 100K API Access </td> </tr> <tr class="active"> <td> 200MB Storage </td> </tr> <tr> <td> Custom Cloud Services </td> </tr> <tr class="active"> <td> Weekly Reports </td> </tr> </table> </div> <div class="panel-footer"> <a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Sign Up</a> 1 month FREE trial</div> </div> </div> <div class="col-xs-12 col-md-3"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title"> Gold</h3> </div> <div class="panel-body"> <div class="the-price"> <h1> $35<span class="subscript">/mo</span></h1> <small>1 month FREE trial</small> </div> <table class="table"> <tr> <td> 5 Account </td> </tr> <tr class="active"> <td> 20 Project </td> </tr> <tr> <td> 300K API Access </td> </tr> <tr class="active"> <td> 500MB Storage </td> </tr> <tr> <td> Custom Cloud Services </td> </tr> <tr class="active"> <td> Weekly Reports </td> </tr> </table> </div> <div class="panel-footer"> <a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Sign Up</a> 1 month FREE trial</div> </div> </div> </div> </div>

body { margin-top: 20px; } .panel { text-align: center; } .panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); } .panel-body { padding: 0px; text-align: center; } .the-price { background-color: rgba(220,220,220,.17); box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff; padding: 20px; margin: 0; } .the-price h1 { line-height: 1em; padding: 0; margin: 0; } .subscript { font-size: 25px; }