<div class="wrap">
	<div class="pricing-table">
		<div class="plan">
			<h3 class="name">Basic</h3>
			<h4 class="price">$10<span>/month</span></h4>

			<ul class="details">
				<li><strong>1</strong> Database</li>
				<li><strong>10GB</strong> file storage</li>
				<li><strong>100GB</strong> bandwidth</li>
			</ul>

			<h5 class="order"><a href="#">Order Now</a></h5>
		</div><!--.plan-->

		<div class="plan">
			<h3 class="name">Standard</h3>
			<h4 class="price">$20<span>/month</span></h4>

			<ul class="details">
				<li><strong>2</strong> Databases</li>
				<li><strong>20GB</strong> file storage</li>
				<li><strong>150GB</strong> bandwidth</li>
			</ul>

			<h5 class="order"><a href="#">Order Now</a></h5>
		</div><!--.plan-->

		<div class="plan">
			<h3 class="name">Premium</h3>
			<h4 class="price">$30<span>/month</span></h4>

			<ul class="details">
				<li><strong>5</strong> Databases</li>
				<li><strong>50GB</strong> file storage</li>
				<li><strong>500GB</strong> bandwidth</li>
			</ul>

			<h5 class="order"><a href="#">Order Now</a></h5>
		</div><!--.plan-->
	</div><!--.pricing-table-->
</div><!--.wrap-->
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i');

* {margin: 0; padding: 0;}

.cf:before,
.cf:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.cf:after {clear: both;}
.cf {zoom: 1;}

body{
	font: 16px/28px "Roboto";
	font-weight: lighter;
	background-color: #90a4ae;
}
strong{font-weight: bold;}
h1,h2,h3,h4,h5,h6 {font-weight: lighter;}

.wrap{
	width: 900px;
	margin: 70px auto;
	color: #607d8b;
	box-shadow: 1px 1px 10px #424242;
}

.pricing-table{
	@extend .cf;
	.plan {
		box-sizing: border-box;
		width: 300px;
		background-color: #fff; float: left;
		text-align: center;
		position: relative;
		z-index: 10;

		h3.name{
			font-size: 20px;
			background-color: #546e7a;
			padding: 15px; color: #fff;
		}

		h4.price{
			font-size: 49px; color: #fff; padding: 30px;
			background-color: #01A4F5; line-height: 40px;
			span{font-size: 16px; font-style: italic;}

		}

		ul.details{
			list-style-type: none;

			li{
				border-bottom: 1px solid #B3B9C4;
				padding: 15px;
			}
		}

		h5.order{
			padding: 30px; font-size: 17px;
			a{
				text-decoration: none;
				color: #fff; background-color: #01A4F5;
				padding: 10px 20px;
			}
		}


		&:first-child{
			h4.price{background-color: #0EC0A5}
			h5.order{
				a{background-color: #0EC0A5;}
			}
		}

		&:last-child{
			h4.price{background-color: #F22D47}
			h5.order{
				a{background-color: #F22D47;}
			}
		}

		&:nth-child(2n){box-shadow: 0px 0px 10px #424242; z-index:100;}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js