Html tabs that can be inserted inside body tag

html_tabs_with_css_only.html

<br/>
<style>
.tabcontainer {
    margin: 0 auto;
    width: 100%; 
}

.tabcontainer input {
	height: 2.5em;
	visibility: hidden;
}

.tabcontainer label {
	background: #f9f9f9;  
	border-radius: .25em .25em 0 0;
	color: #888;  
	cursor: pointer;
	display: block;
	float: left;
	font-size: 1em;  
	height: 2.5em;
	line-height: 2.5em;
	margin-right: .25em;
	padding: 0 1.5em;
	text-align: center;
}

.tabcontainer input:hover + label {
	background: #ddd; 
	color: #666; 
}

.tabcontainer input:checked + label {
	background: #f1f1f1; 
	color: #444; 
	position: relative;
	z-index: 6;
	/*
	-webkit-transition: .1s;
	-moz-transition: .1s;
	-o-transition: .1s;
	-ms-transition: .1s;
	*/
}
.tabcontent {
	background: #f1f1f1; 
	border-radius: 0 .25em .25em .25em;
	min-height: 20em; 
	position: relative;
	width: 100%;
	z-index: 5;
}

.tabcontent div {
	opacity: 0;
	padding: 1.5em;
	position: absolute;
	z-index: -100;
	/*
	transition: all linear 0.1s;
	*/
}

.tabcontainer input.visible {
  visibility: visible !important;
}
 
<!-- You have to add this part for each tab :(  -->
.tabcontainer input#atab1:checked ~ .tabcontent #acontent1,
.tabcontainer input#atab2:checked ~ .tabcontent #acontent2,
.tabcontainer input#atab3:checked ~ .tabcontent #acontent3,
.tabcontainer input#atab4:checked ~ .tabcontent #acontent4,
.tabcontainer input#btab1:checked ~ .tabcontent #bcontent1,
.tabcontainer input#btab2:checked ~ .tabcontent #bcontent2,
.tabcontainer input#btab3:checked ~ .tabcontent #bcontent3 {
    opacity: 1;
    z-index: 100;
}
</style>
<div class="tabcontainer">
  <input id="atab1" type="radio" name="atabgroup" checked="checked"> 
  <label for="atab1">Tab 1</label> 
  <input id="atab2" type="radio" name="atabgroup"> 
  <label for="atab2">Tab 2</label> 
  <input id="atab3" type="radio" name="atabgroup"> 
  <label for="atab3">Tab 3</label>
  <input id="atab4" type="radio" name="atabgroup"> 
  <label for="atab4">Tab 4</label>
	<div class="tabcontent">
		<div id="acontent1">
			<p>
				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum sit reprehenderit iusto harum minima. Assumenda, accusamus, perspiciatis inventore tempora qui pariatur quisquam? Deleniti, placeat ea nostrum officiis obcaecati temporibus quod. Ullam, in, adipisci autem at fugit ab tempore enim ratione nesciunt alias corporis vitae quo quod nostrum itaque vero iure?
			</p>
		</div>
		<div id="acontent2">
			<p>
				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, est, nisi enim voluptates dicta quibusdam recusandae eveniet provident non at nostrum nesciunt laudantium omnis aliquam debitis magni expedita cumque tempore.
			</p>
			<p>
				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, molestiae, officia repellendus quasi cumque dolor eius deserunt possimus aliquid neque nam assumenda veniam soluta enim commodi aperiam reprehenderit quia incidunt.
			</p>
		</div>
		<div id="acontent3">
			<ul>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in magni illo dolore dicta vero.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, minus, aspernatur voluptatem doloribus labore modi.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, exercitationem quia id accusamus beatae sunt? Dolorum mollitia sint debitis delectus.</li>
			</ul>
			<p>
				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, accusantium, provident ab quo sed blanditiis perspiciatis distinctio aut voluptatibus cum odio quaerat iure vel dolorum fugit explicabo suscipit tenetur. Sed!
			</p>
		</div>
    <div id="acontent4">
			<ul>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in magni illo dolore dicta vero.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, minus, aspernatur voluptatem doloribus labore modi.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, exercitationem quia id accusamus beatae sunt? Dolorum mollitia sint debitis delectus.</li>
			</ul>
		</div>
	</div>
</div>
<br>
<div class="tabcontainer">
 	<input id="btab1" type="radio" name="btabgroup" checked="checked"> 
	<label for="btab1">Tab 1</label>
	<input id="btab2" type="radio" name="btabgroup"> 
	<label for="btab2">Tab 2</label> 
	<input id="btab3" type="radio" name="btabgroup"> 
	<label for="btab3">Tab 3</label>
	<div class="tabcontent">
		<div id="bcontent1">
			<p>
				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum sit reprehenderit iusto harum minima. Assumenda, accusamus, perspiciatis inventore tempora qui pariatur quisquam? Deleniti, placeat ea nostrum officiis obcaecati temporibus quod. Ullam, in, adipisci autem at fugit ab tempore enim ratione nesciunt alias corporis vitae quo quod nostrum itaque vero iure?
			</p>
			<p>
				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, id blanditiis deserunt in molestiae excepturi incidunt molestias dolor sunt dolore obcaecati non repellat mollitia error placeat est exercitationem sit voluptates iure autem saepe voluptas harum unde perferendis modi provident labore voluptatum. Repudiandae, aspernatur sit harum quod vero quos sequi voluptas!
			</p>
		</div>
		<div id="bcontent2">
			<p>
				 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, molestiae, officia repellendus quasi cumque dolor eius deserunt possimus aliquid neque nam assumenda veniam soluta enim commodi aperiam reprehenderit quia incidunt.
			</p>
		</div>
		<div id="bcontent3">
			<ul>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in magni illo dolore dicta vero.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, minus, aspernatur voluptatem doloribus labore modi.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, exercitationem quia id accusamus beatae sunt? Dolorum mollitia sint debitis delectus.</li>
			</ul>
		</div>
	</div>
</div>