Creating Simple and Interactive Pricing Tables in CSS
.preview-block{position:relative;background:#f8f8f8;padding:20px;margin-bottom:20px;border:1px solid #dedede;text-align:center;transition:all .5s}@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);@import url(http://fonts.googleapis.com/cssfamily=Source+Sans+Pro:300,400,600);body{background:#ededeb}.title{width:600px;margin:0 auto;text-align:center}.title h1{margin:0;font-family:’font-family: ‘Montserrat’, sans-serif;’,sans-serif;font-weight:400;color:#3d3d3d}.title h2{margin:8px 0 0;font-size:26px;color:#8b8b8b;font-weight:200;font-family:’font-family: ‘Montserrat’, sans-serif;’,sans-serif}.title h3{margin:0;font-size:12px;color:#bababa;font-weight:200;font-family:’font-family: ‘Source Sans Pro’, sans-serif;’,sans-serif}.ui{width:300px;margin:20px auto 0;font-family:Montserrat,sans-serif;color:#fff;box-shadow:none}.ui .drop{z-index:3;opacity:0;width: 100%;background:#107FC9;position:absolute;color:#fff;bottom:100px;padding:15px 30px 0;transition-property:bottom,opacity;transition-duration:.8s}.ui .drop p{color:#f8fbfa}.ui_box{width:300px;float:left;margin:0 auto;margin-bottom:20px;position:relative;background:#dedede;cursor:pointer;transform:scale(1);transition-property:all;transition-duration:.1s;border-bottom:5px solid #107FC9;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 1px 0 rgba(0,0,0,.25)}body .ui_box_top{background:#3b3b3b;padding:15px; […]