<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<ul class="pricingt">
	<li>
		<h1>Normal</h1>
		<div class="tcircle">
			<div class="price">
				FREE
			</div>
		</div>
		<div class="tlist">
			<ul>
				<li>Limited Pens</li>
				<li>Full View</li>
				<li>Debug View</li>
        <li>Details View</li>
        <li>No External Resources</li>
        <li>Online Code Editor</li>
        <li>1 Embed Theme</li>
			</ul>
		</div>
		<div class="tfooter">
			<a href="#" class="button">Get Started</a>
		</div>
  </li>
  	<li class='active'>
		<h1 class='active'>Super Pro</h1>
		<div class="tcircle">
			<div class="price">
        $30<br/>
        <span style='font-size: .7em'>A Month</span>
			</div>
		</div>
		<div class="tlist">
			<ul>
				<li>Unlimited Private Pens</li>
				<li>Live View</li>
				<li>Asset Hosting</li>
        <li>Collab Mode</li>
				<li>Professor Mode</li>
        <li>Multiple External Resources</li>
        <li>Unlimited Embed Themes</li>
			</ul>
		</div>
		<div class="tfooter">
			<a href="#" class="button">Upgrade</a>
		</div>
  </li>
  	<li>
		<h1>Pro</h1>
		<div class="tcircle">
			<div class="price">
        $9<br/>
        <span style='font-size: .7em'>A Month</span>
			</div>
		</div>
		<div class="tlist">
			<ul>
				<li>Unlimited Private Pens</li>
				<li>Live View</li>
				<li>Asset Hosting</li>
        <li>Collab Mode</li>
				<li>Professor Mode</li>
        <li>Multiple External Resources</li>
        <li>Unlimited Embed Themes</li>
			</ul>
		</div>
		<div class="tfooter">
			<a href="#" class="button">Upgrade</a>
		</div>
  </li>
</ul>

/* QUICK RESET */ * { margin: 0; padding: 0 }

body { background: #222 }

.pricingt {
  width: 600px; 
  color: #fff;
  font: normal normal normal 
        14px/1.5em 
        'Source Sans Pro', 
        Helvetica, 
        Arial, 
        sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  cursor: default;
  margin: 20px auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none
}

.pricingt>li {
  background: #444;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#444), to(#222));
  background: -webkit-linear-gradient(#444, #222);
  background: -moz-linear-gradient(#444, #222);
  background: -o-linear-gradient(#444, #222);
  background: linear-gradient(#444, #222);
  width: 33.33%;
  -webkit-box-shadow:
  inset 0 -15px 30px rgba(0,0,0,0.4),
        0 5px 10px rgba(0,0,0,0.5); 
  -moz-box-shadow:
  inset 0 -15px 30px rgba(0,0,0,0.4),
        0 5px 10px rgba(0,0,0,0.5); 
  box-shadow:
  inset 0 -15px 30px rgba(0,0,0,0.4),
        0 5px 10px rgba(0,0,0,0.5);
  float: left;
  list-style-type: none
}

.pricingt>li.active {
  background: #1c6e7f;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#699b67), to(#547d52));
  background: -webkit-linear-gradient(#699b67, #547d52);
  background: -moz-linear-gradient(#699B67, #547d52);
  background: -o-linear-gradient(#699B67, #547d52);
  background: linear-gradient(#699B67, #547d52);
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -o-transform: scale(1.02);
  transform: scale(1.02);
  box-shadow: 0 0 20px #000
}

.pricingt h1 {
  text-transform: uppercase;
  padding: 15px 0;
  font-weight: 400;
  background: #111;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#555), to(#333));
  background: -webkit-linear-gradient(#555, #333);
  background: -moz-linear-gradient(#555, #333);
  background: -o-linear-gradient(#555, #333);
  background: linear-gradient(#555, #333);
  font-size: 24px
}

.pricingt h1.active { 
  background: #044069;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#699b67), to(#547d52));
  background: -webkit-linear-gradient(#699b67, #547d52);
  background: -moz-linear-gradient(#699b67, #547d52);
  background: -o-linear-gradient(#699b67, #547d52);
  background: linear-gradient(#699b67, #547d52)
}

.pricingt div.tcircle {
  width: 125px;
  height: 125px;
  margin: 20px auto;
  border: 2px solid #555;
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 0.3s ease .300ms;
  -moz-transition: all 0.3s ease .300ms;
  -o-transition: all 0.3s ease .300ms;
  transition: all 0.3s ease .300ms;
  -webkit-box-shadow: inset 0 0 20px #000;
  -moz-box-shadow: inset 0 0 20px #000;
  box-shadow: inset 0 0 20px #000;
  display: table
}
.pricingt li.active div.tcircle:before {
  content:'';
  background: #97b995;
  width: 198px;
  position: absolute;
  height: 1px;
  left: -36px;
  top: 100px
}

.pricingt .price {
  font-size: 30px;
  text-transform: uppercase;
  vertical-align: middle;
  display: table-cell
}

.pricingt .tlist li {
  list-style-type: none;
  margin: 10px 0
}

.pricingt .tfooter {
  padding: 10px;
  background: #333;
  border-top: 2px solid #777
}

.pricingt .tfooter .button{
  color: #fff;
  display: inline-block;
  text-decoration: none;
  background: #000;
  padding: 5px 10px;
  border-radius: 15px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#111));
  background: -webkit-linear-gradient(#222, #111);
  background: -moz-linear-gradient(#222, #111);
  background: -o-linear-gradient(#222, #111);
  background: linear-gradient(#222, #111);
}

.pricingt li.active .tfooter .button {
  background: #699B67;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#699b67), to(#547d52));
  background: -webkit-linear-gradient(#699b67, #547d52);
  background: -moz-linear-gradient(#699b67, #547d52);
  background: -o-linear-gradient(#699b67, #547d52);
  background: linear-gradient(#699b67, #547d52)
}

.button:active { position: relative; top: 1px }






li, li h1 {
  -webkit-transition: all 0.25s ease;
     -moz-transition: all 0.25s ease;
       -o-transition: all 0.25s ease;
          transition: all 0.25s ease;
}

//PURE CSS3 PRICING TABLES

// Original by "JustAnotherCoder" I just added the hover styles and some css at the end.

$('li').hover(function() {
  $(this).addClass('active');
  $(this).children('h1').addClass('active');
});

$('li').mouseleave(function() {
  $(this).removeClass('active');
  $(this).children('h1').removeClass('active');
});