Als erstes brauchen wir das Framework UIkit. Dieses können Sie sich hier herunterladen. Ich nutze zum Zeitpunkt der Erstellung des Tutorials die Version 2.24.3.
Sollten Sie ein Joomla! oder Wordpress Template nutzen was UIKit schon implementiert hat, brauchen Sie das Framework nicht extra herunterzuladen.

Fangen wir an.
Stellen Sie sicher das folgende Dateien im Kopfbereich ihres Templates geladen werden:

1. Erstellen wir jetzt das Grundgerüst.

Erklärung:

• uk-width-1-1: nutzt die gesammte verfügbare Breite / 100%
• uk-block-primary uk-block-large: Block hintergrundfarbe, Außenabstände oben und unten
• uk-container uk-container-center: zentrierter container
• uk-grid-width-small-1-1 uk-grid-width-medium-1-4: ab einer Bildschirmgröße von 767px werden die 4 Preistabellen übernander angezeigt.
• data-uk-grid: ermöglicht es Ihnen, eine dynamische Grid-Layout zu erstellen

2. Preistabellen erstellen.

	

		

			
STARTER
		
		
 
			
Free
 
		
		

			
* Free *
			
* Free Templates *
			
* Profile Page *
			
* 2 months support *
		
		

			

				Buy
			
		
	

Erklärung:

• der erste Div-Container wird für das dynamische Grid-Layout verwendet
• uk-panel uk-panel-box-secondary uk-panel-hover uk-text-center tm-panel tm-panel-shadow: UIKit verwendet Panele für bestimmte Abschnitte um Ihrer Inhalte zu umschließen und zu gestalten. Diese Panele nutze ich hier auch, zentriere den gesammten Text, erstelle ein hover effekt und verwende noch 2 weiter eigene CSS-Klassen: tm-panel tm-panel-shadow.
• uk-panel-box-primary uk-panel-teaser: hintergrundfarbe, ein panel-teaser wird normalerweise für Bilder in Panelen genutzt ohne abstand zum außenrand
• uk-border-circle tm-price: hier wird der Preis in einem Kreis dargestellt, eigene CSS-Klasse tm-price
• uk-list uk-list-striped uk-text-bold: zusätliche infos für Ihre Besucher
• uk-animation-hover uk-animation-fade: animierter Button

3. Eigenen CSS-Style.

/* UIkit 2.24.3 | Pricing Tables | 3d-hobby-art.de */

/* Schriftgestaltung */
@import url(https://fonts.googleapis.com/css?family=Ubuntu);

html {
	font: 400 14px/20px 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Panel mit "scale" effekt, maximaler weite in px */
.uk-panel.tm-panel {
	transition: all 0.18s ease-in-out 0s;
	max-width: 240px;
}

.uk-panel.tm-panel:hover {
	transform: scale(1.03);
	z-index: 3;
}

/* Panel-Teaser mit "border radius" */
.uk-panel-hover.tm-panel > .uk-panel-teaser {
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	margin-top: -14px;
	margin-left: -14px;
	margin-right: -14px;
}

.uk-panel.tm-panel > :last-child {
	margin-bottom: -14px;
	margin-left: -14px;
	margin-right: -14px;
}


/* http://www.paulund.co.uk/creating-different-css3-box-shadows-effects */
.tm-panel-shadow {
	position:relative;       
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.tm-panel-shadow:before, .tm-panel-shadow:after {
	content:"";
	position:absolute; 
	z-index:-1;
	-moz-box-shadow:0 0 18px rgba(0,0,0,0.75);
	-webkit-box-shadow:0 0 18px rgba(0,0,0,0.75);
	box-shadow:0 0 18px rgba(0,0,0,0.75);
	top:50%;
	bottom:0;
	left:10px;
	right:10px;
	border-radius:100px / 10px;
}

/* Preisgestaltung ;-) */
.tm-price {
	width: 100px;
	height: 100px;
	border: 2px solid #EBF7FD;
	margin: 0 auto;
}

.tm-price h2 {
	font-size: 40px;
	line-height: 100px;
}

Das Resultat dieses Tutorials können Sie sich hier anschauen.
Die Dateien zum nachvollziehen des Tutorials können Sie sich im Download::Bereich herunterladen.