Cacher is the code snippet organizer for pro developers

/*...... Demo Styles ........*/
.example-2 {
	background: #5aaf4c;
	box-shadow: inset 0 8px 0 0 rgba(255,255,255,.5),inset 0 -8px 0 0 rgba(255,255,255,.5);

	.contain {
		background: rgba(#000, 0.1);
		padding: 2em 1em;
		color: #fff;
	}

	h2 {
		margin: 0;
		margin-bottom: 1rem;
		font-size: 2rem;
	}

	p {
		margin: 0;
	}

	.category {
		display: inline-block;
		padding: 5px 10px;
		background: rgba(#fff, 0.5);
		text-decoration: none;
		color: #000;
		margin-bottom: 0.5rem;	
	}
}


/*...... General Styles ........*/

body {
	font-family: 'Arial';
  line-height: 1.4;
}

.contain {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.off-screen {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
}

* {
	box-sizing: border-box;
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

code {
	background: rgba(lightgrey, 0.5);
	display: inline-block;
	padding: 5px;
}

.item {
	margin-bottom: 4em;
}

input, button {
  border: 0;
}

<div class="item example-2">
  <div class="contain">
    <a class="category" href="#">Learning</a>
    <h2>This is a title for this awesome blog post</h2>
    <p>And here is the post teaser</p>
  </div>
</div>

<div class="item example-2" style="background-color: #00bcd4;">
  <div class="contain">
    <a class="category" href="#">Learning</a>
    <h2>This is a title for this awesome blog post</h2>
    <p>And here is the post teaser</p>
  </div>
</div>