If the overall theme of your website is purple and you are looking for a beautiful but simple pricing panel, you can use this panel. This panel has an icon and the panel items have a purple background. In the item space, there is only a cross or confirmation tick, and on the left and outside of all panels, the names of the panel items are written. Also, the sign-up button gets a little darker during the hover.
HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='http://www.devanswer.com/codes/files/bootstrapgrid.min.css'>
<div class="container">
<div class="table">
<div class="col-md-3 prop">
<h2>prop</h2>
<div class="rec"></div>
<li class="hidden-xs">Editable php & css files </li>
<li class="hidden-xs">One-click auto-install</li>
<li class="hidden-xs">Premium support</li>
<li class="hidden-xs">Theme updates</li>
<li class="hidden-xs">Domain use license</li>
<li class="hidden-xs">Layred photoshop files</li>
<li class="hidden-xs">Bonus theme</li>
</div>
<div class="col-xs-12 col-md-3">
<div class="price active">
<h2>standar</h2>
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 10,8L 10,5 C 10,4.448, 9.552,4, 9,4S 8,4.448, 8,5L 8,8 C 6.896,8, 6,8.896, 6,10l0,2 c0,1.104, 0.896,2, 2,2l0,13 C 8,27.552, 8.448,28, 9,28S 10,27.552, 10,27L 10,14 c 1.104,0, 2-0.896, 2-2L 12,10 C 12,8.896, 11.104,8, 10,8z M 8,10l 2,0 l0,2 L 8,12 L 8,10 zM 18,18L 18,5 C 18,4.448, 17.552,4, 17,4S 16,4.448, 16,5L 16,18 c-1.104,0-2,0.896-2,2l0,2 c0,1.104, 0.896,2, 2,2l0,3 C 16,27.552, 16.448,28, 17,28S 18,27.552, 18,27L 18,24 c 1.104,0, 2-0.896, 2-2l0-2 C 20,18.896, 19.104,18, 18,18z M 16,20l 2,0 l0,2 L 16,22 L 16,20 zM 26,12L 26,5 C 26,4.448, 25.552,4, 25,4S 24,4.448, 24,5L 24,12 c-1.104,0-2,0.896-2,2l0,2 c0,1.104, 0.896,2, 2,2l0,9 c0,0.552, 0.448,1, 1,1s 1-0.448, 1-1L 26,18 c 1.104,0, 2-0.896, 2-2L 28,14 C 28,12.896, 27.104,12, 26,12z M 24,14l 2,0 l0,2 l-2,0 L 24,14 z"></path></g></svg>
<li>
<h4 class="visible-xs">Editable php & css files </h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">One-click auto-install</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">Premium support</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<li>
<h4 class="visible-xs">Theme updates</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<li>
<h4 class="visible-xs">Domain use license</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<li>
<h4 class="visible-xs">Layred photoshop files</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<li>
<h4 class="visible-xs">Bonus theme</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<span>from <strong>35</strong><sub>$</sub></span>
<a class="btn" href="#">sign up</a>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="price">
<h2>developer</h2>
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 2.544,24.656c 0.48,0.746, 1.488,1.634, 3.568,1.634c 1.308,0, 2.982-0.382, 4.846-1.048 C 11.764,28.794, 13.246,32, 16,32c 2.8,0, 4.288-3.316, 5.084-6.942c 1.868,0.632, 3.548,0.996, 4.862,0.996c 2.2,0, 3.232-0.936, 3.712-1.72 c 1.552-2.544-0.87-5.774-3.794-8.444c 0.54-0.52, 1.048-1.040, 1.494-1.546c 2.528-2.878, 3.234-5.232, 2.098-7 c-0.48-0.746-1.488-1.634-3.568-1.634l0,0 c-1.308,0-2.982,0.382-4.846,1.048C 20.236,3.206, 18.754,0, 16,0C 13.2,0, 11.712,3.316, 10.916,6.942 C 9.048,6.308, 7.368,5.946, 6.054,5.946l0,0 c-2.2,0-3.234,0.936-3.712,1.72C 0.79,10.21, 3.212,13.44, 6.136,16.11 c-0.54,0.522-1.048,1.040-1.494,1.546C 2.114,20.534, 1.408,22.89, 2.544,24.656z M 16,30c-1.294,0-2.442-2.162-3.174-5.5 c 1.052-0.454, 2.14-0.984, 3.254-1.59c 1.068,0.548, 2.112,1.026, 3.124,1.442C 18.476,27.774, 17.314,30, 16,30z M 12,16 c0-0.734, 0.022-1.45, 0.052-2.154c 0.576-0.408, 1.166-0.812, 1.784-1.21C 14.546,12.18, 15.248,11.76, 15.944,11.36 c 0.706,0.384, 1.418,0.786, 2.138,1.224c 0.644,0.394, 1.262,0.796, 1.862,1.2C 19.978,14.508, 20,15.244, 20,16 c0,0.734-0.022,1.45-0.052,2.154C 19.372,18.562, 18.782,18.966, 18.164,19.364C 17.454,19.82, 16.752,20.24, 16.056,20.64 c-0.706-0.384-1.418-0.786-2.138-1.224c-0.644-0.394-1.262-0.796-1.862-1.2C 12.022,17.492, 12,16.756, 12,16z M 10.010,16.752 C 9.716,16.528, 9.428,16.304, 9.152,16.082C 9.428,15.848, 9.714,15.614, 10.006,15.38C 10.002,15.648, 10,15.874, 10,16 C 10,16.146, 10.004,16.422, 10.010,16.752z M 12.234,11.308C 12.292,10.74, 12.36,10.19, 12.438,9.658C 12.894,9.852, 13.36,10.066, 13.836,10.29 c-0.36,0.22-0.72,0.43-1.082,0.662C 12.574,11.070, 12.412,11.192, 12.234,11.308z M 18.030,10.24c 0.516-0.26, 1.020-0.502, 1.514-0.724 C 19.628,10.082, 19.7,10.672, 19.762,11.278c-0.278-0.178-0.512-0.324-0.636-0.4C 18.76,10.654, 18.394,10.452, 18.030,10.24z M 21.99,15.248 c 0.294,0.224, 0.582,0.448, 0.858,0.67c-0.276,0.234-0.562,0.466-0.856,0.702C 21.998,16.352, 22,16.126, 22,16 C 22,15.854, 21.996,15.578, 21.99,15.248z M 19.766,20.692c-0.058,0.568-0.124,1.12-0.202,1.65c-0.456-0.194-0.924-0.408-1.398-0.632 c 0.36-0.22, 0.72-0.43, 1.082-0.662C 19.426,20.93, 19.588,20.808, 19.766,20.692z M 12.874,21.122c 0.366,0.224, 0.73,0.426, 1.096,0.638 c-0.516,0.26-1.020,0.502-1.514,0.724c-0.084-0.564-0.156-1.154-0.218-1.762C 12.516,20.898, 12.75,21.046, 12.874,21.122z M 27.95,23.292c-0.316,0.516-1.016,0.762-2.004,0.762c-1.154,0-2.712-0.352-4.488-0.976c 0.212-1.372, 0.344-2.712, 0.422-3.856 c 0.894-0.66, 1.72-1.328, 2.502-2C 27.204,19.784, 28.672,22.11, 27.95,23.292z M 25.888,7.71c 0.916,0, 1.574,0.23, 1.886,0.716 c 0.75,1.166-0.666,3.528-3.43,6.158c-0.86-0.7-1.708-1.34-2.472-1.882c-0.082-1.18-0.218-2.556-0.444-3.962 C 23.202,8.082, 24.752,7.71, 25.888,7.71z M 16,2c 1.294,0, 2.442,2.162, 3.174,5.5c-1.052,0.454-2.14,0.984-3.254,1.59 C 14.85,8.542, 13.806,8.062, 12.796,7.648C 13.524,4.226, 14.686,2, 16,2z M 4.050,8.708c 0.316-0.516, 1.016-0.762, 2.004-0.762 c 1.154,0, 2.712,0.352, 4.488,0.976C 10.328,10.294, 10.198,11.632, 10.12,12.778c-0.894,0.66-1.72,1.328-2.502,2 C 4.796,12.216, 3.328,9.89, 4.050,8.708z M 10.126,19.296c 0.082,1.18, 0.218,2.556, 0.444,3.962c-1.772,0.658-3.322,1.030-4.458,1.030 c-0.916,0-1.574-0.23-1.886-0.716c-0.75-1.166, 0.666-3.528, 3.43-6.158C 8.514,18.114, 9.362,18.756, 10.126,19.296z"></path></g></svg>
<li>
<h4 class="visible-xs">Editable php & css files </h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">One-click auto-install</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">Premium support</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">Theme updates</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<li>
<h4 class="visible-xs">Domain use license</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<li>
<h4 class="visible-xs">Layred photoshop files</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<li>
<h4 class="visible-xs">Bonus theme</h4>
<img src="http://www.devanswer.com/img/icon_close_alt2.svg">
</li>
<span>from <strong>55</strong><sub>$</sub></span>
<a class="btn" href="#">sign up</a>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="price">
<h2>professional</h2>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" enable-background="new 0 0 16 16" xml:space="preserve"> <g><path d="M 30,8l-6,0 L 24,4 c0-1.104-0.896-2-2-2L 10,2 C 8.896,2, 8,2.896, 8,4l0,4 L 2,8 C 0.896,8,0,8.896,0,10l0,18 c0,1.104, 0.896,2, 2,2l 28,0 c 1.104,0, 2-0.896, 2-2L 32,10 C 32,8.896, 31.104,8, 30,8z M 10,4l 12,0 l0,4 L 10,8 L 10,4 z"></path></g></svg>
<li>
<h4 class="visible-xs">Editable php & css files </h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">One-click auto-install</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">Premium support</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">Theme updates</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">Domain use license</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">Layred photoshop files</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<li>
<h4 class="visible-xs">Bonus theme</h4>
<img src="http://www.devanswer.com/img/icon_check.svg">
</li>
<span>from <strong>195</strong><sub>$</sub></span>
<a class="btn" href="#">sign up</a>
</div>
</div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body {
background: url("http://www.devanswer.com/img/bg.png");
}
.table {
margin: 100px;
}
.prop .rec {
width: 100px;
height: 100px;
display: block;
margin: 0 auto 30px auto;
visibility: hidden;
}
.prop h2 {
padding: 15px;
visibility: hidden;
}
.prop li {
font-family: "Montserrat", sans-serif;
list-style: none;
color: #fffff3;
padding: 5px;
margin: 5px 0;
display: inline-block;
border-bottom: 1px dashed #a493c6;
}
.price {
background: #fffff3;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.5);
}
.price h2 {
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
padding: 15px;
color: #566270;
}
.price svg {
display: block;
margin: 0 auto 30px auto;
width: 100px;
height: 100px;
fill: #a493c6;
}
.price li:nth-child(even) {
background: #a493c6;
}
.price li:nth-child(odd) {
background: #e0e3da;
}
.price li {
list-style: none;
text-align: center;
padding: 3px;
margin: 10px 0;
}
.price span {
display: block;
text-align: center;
font-family: "Montserrat", sans-serif;
font-size: 2em;
color: #566270;
}
.price span strong {
font-size: 2.2em;
}
.price a {
display: block;
font-family: "Montserrat", sans-serif;
font-size: 2em;
padding: 10px;
background: #a493c6;
color: #fffff3;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
.price a:hover {
background: #566270;
}
.visible-xs {
display: none;
}
@media (max-width: 74.9em) {
.table {
margin: 100px 0;
}
.visible-xs {
display: none;
margin: 5px 0;
font-family: "Montserrat", sans-serif;
}
}
@media (max-width: 61.9em) {
.prop {
display: none;
}
.visible-xs {
display: block;
}
}
