Cacher is the code snippet organizer for pro developers

* {
  box-sizing: border-box;
}
body {
  background-color: #2c3e50;
  font-family: Arial;
  color: #34495e;
  line-height: 1.5;
  font-size: 18px;
}
.wrapper {
  width: 80%;
  margin: 100px auto;
  max-width: 600px;
}
.wrapper label {
  cursor: pointer;
  float: left;
  margin-right: 5px;
  display: block;
  padding: 10px 40px;
  background-color: #ecf0f1;
  border-radius: 20px 20px 0 0;
}
.wrapper input {
  display: none;
}
.wrapper input:checked + label {
  background-color: #e74c3c;
  color: #fefefe;
}
.wrapper input[id="tab-1"]:checked ~ .content .tab-1, .wrapper input[id="tab-2"]:checked ~ .content .tab-2, .wrapper input[id="tab-3"]:checked ~ .content .tab-3 {
  display: block;
}
.wrapper .content {
  clear: both;
  position: relative;
}
.wrapper article {
  width: 100%;
  padding: 70px 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  display: none;
  min-height: 200px;
  border-top: 5px solid #e74c3c;
  border-radius: 0 10px 10px 10px;
}

<div class="wrapper">
	<input type="radio" name="tab" id="tab-1" checked>
	<label for="tab-1">Tab-1</label>
	<input type="radio" name="tab" id="tab-2">
	<label for="tab-2">Tab-2</label>
	<input type="radio" name="tab" id="tab-3">
	<label for="tab-3">Tab-3</label>	
	
	<div class="content">
		<article class="tab-1">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cum fuga quas quibusdam ea minima nemo illo repudiandae totam officia!
		</article>
		<article class="tab-2">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, ipsum?</article>
		<article class="tab-3">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore numquam, itaque laboriosam debitis temporibus incidunt, dicta dignissimos sapiente voluptatibus iusto. Voluptate, laborum libero odio nostrum consequuntur aliquid molestiae soluta optio.
		</article>
	</div>
	<br class="clear:both" />
</div><!-- //wrapper -->