Pure CSS functional tabbed area

css-tabs.html

<style>
  .tabs { position: relative;
        clear: both;
        margin: 25px 0;
        min-height: 200px;
        width: 300px;
        font: 700 15px Arial;
      }

.singleTab { float: left }

    .singleTab label { position: relative;
                       left: 1px;
                       margin-left: -1px;
                       padding: 15px;
                       background: #fff;
                       color: #3363FF;
                     }

    .singleTab [type="radio"] { position: absolute;
                                top: -999em;
                                left: -999em;
                              }

.singleContent { position: absolute;
                 top: 32px;
                 right: 0;
                 bottom: 0;
                 left: 0;
                 overflow: hidden;
                 padding: 20px;
                 background: #FFF;
                 background: #F8F5EF;
                 color: #172BAE;
               }

    .singleContent > * { opacity: 0;
                         filter: alpha(opacity=0);
                         -webkit-transition: all 0.5s ease-in-out;
                         -moz-transition: all 0.5s ease-in-out;
                         -o-transition: all 0.5s ease-in-out;
                         transition: all 0.5s ease-in-out;
                       }

[type="radio"]:checked ~ label { z-index: 2;
                                 margin-top: 2px;
                                 background: #fff;
                                 color: #172BAE;
                               }

[type="radio"] ~ label:hover { opacity: 0.8;
                               filter: alpha(opacity=80);
                               cursor: pointer;
                             }

[type="radio"]:checked ~ label ~ .singleContent { z-index: 1 }

    [type="radio"]:checked ~ label ~ .singleContent > * { opacity: 1;
                                                          filter: alpha(opacity=100);
                                                        }

</style>

<div class="tabs">
  <div class="singleTab">
		<input type="radio" checked="" name="singleTab-group-1" id="singleTab-1">
		<label for="singleTab-1">One</label>
		<div class="singleContent">
			<p>One</p>
		</div>
	</div>
	<div class="singleTab">
		<input type="radio" name="singleTab-group-1" id="singleTab-2">
		<label for="singleTab-2">Two</label>
		<div class="singleContent">
			<p>Two</p>
		</div>
	</div>
	<div class="singleTab">
		<input type="radio" name="singleTab-group-1" id="singleTab-3">
		<label for="singleTab-3">Three</label>
		<div class="singleContent">
			<p>Three</p>
		</div>
	</div>
</div>