CodePen

HTML

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  
  </head>
<body>


<section class="tabs">
	            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
		        <label for="tab-1" class="tab-label-1">Welcome</label>
		
	            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
		        <label for="tab-2" class="tab-label-2">Payment</label>
		
	            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
		        <label for="tab-3" class="tab-label-3">Shipping</label>
			
	            <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
		        <label for="tab-4" class="tab-label-4">Int'l Shipping</label>

	            <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
		        <label for="tab-5" class="tab-label-5">Customer Service</label>

	            <input id="tab-6" type="radio" name="radio-set" class="tab-selector-6" />
		        <label for="tab-6" class="tab-label-6">Returns</label>

	            <input id="tab-7" type="radio" name="radio-set" class="tab-selector-7" />
		        <label for="tab-7" class="tab-label-7">Exchanges</label>
            
			    <div class="clear-shadow"></div>
				
		        <div class="content">
			        <div class="content-1">
						<p>Trends Auto has been specializing in aftermarket car, truck, van & SUV auto accessories for over twenty years.<br><br><b>It is our goal to provide our customers with the best service and pricing available on the internet.</b></p>
				    </div>
			        <div class="content-2">
						<p><table style="font-family: sans-serif;"><tr><td><b><center>We accept the following forms of payment:</b><br>-PayPal<br>-Visa<br>-MasterCard<br>-Discover<br>-American Express</center></td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><img src="http://www.styleend.com/ProdImage/paypal%20icon_S.jpg"></td></tr></table></p>
				    </div>
			        <div class="content-3">
						<p>Handling time is based on the availability of the item.  Your item will ship in 1-30 business days.<br>Please view the handling time stated for each item under the shipping and payments.<br><b>Tracking information will be posted to your sale as soon as it is available.</b><br><br><b>TO VIEW YOUR TRACKING NUMBER:</b><br>1) Log into your eBay account<br>2) Navigate to the My Account tab on the upper right side of your screen<br>3) Click on your eBay won/purchased items<br>4) Your tracking number can be viewed from this summary screen<br><br>If for some reason, your tracking number has not been posted to your sale after your stated handling time, feel free to email or contact us to find out where your item is.  Also, please note that if you order more than one item, the items may ship from different locations and arrive at different times.<br><br>We ship to street addresses <b>ONLY</b> (Sorry no P.O. boxes) within the 48 states and District of Columbia.</p>
				    </div>
				    <div class="content-4">
						 <p>TO OUR INTERNATIONAL CUSTOMERS<br></p>
               

				    </div>
				    <div class="content-5">
						 <p>Stuff To Put Here for Tab Five</p>
               

				    </div>
				    <div class="content-6">
						 <p>Stuff To Put Here for Tab Six</p>
               

				    </div>
				    <div class="content-7">
						 <p>Stuff To Put Here for Tab Seven</p>
               

				    </div>
		        </div>
			</section>

</body></html>
            
          
!
via HTML Inspector

CSS

            
              .tabs {
    position: relative;
	margin: 40px auto;
	width: 1120px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}
.tabs input#tab-2{
	left: 155px;
}
.tabs input#tab-3{
	left: 315px;
}
.tabs input#tab-4{
	left: 475px;
}
.tabs input#tab-5{
	left: 635px;
}
.tabs input#tab-6{
	left: 795px;
}
.tabs input#tab-7{
	left: 955px;
}

.tabs label {
	background: #fff url(http://imagehost.vendio.com/a/35153648/view/TAB-INACTIVE.jpg);
        font-family: sans-serif;
	font-size: 12px;
	line-height: 40px;
	height: 41px;
	position: relative;
	padding: 0 20px;
    float: left;
	display: block;
	width: 120px;
	color: #000;
	text-transform: uppercase;
	font-weight: bold;
        text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;

}

.tabs label:after {
    content: '';
	background: #fff;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	display: block;
}

.tabs input:hover + label {
	background: #fff url(http://imagehost.vendio.com/a/35153648/view/TAB-ACTIVE.jpg);
        width: 120px;
        color:#C0C0C0;
}

.tabs label:first-of-type {
    z-index: 5;
}

.tab-label-2 {
    z-index: 5;
}

.tab-label-3 {
    z-index: 5;
}

.tab-label-4 {
    z-index: 4;
}

.tab-label-5 {
    z-index: 3;
}

.tab-label-6 {
    z-index: 2;
}

.tab-label-7 {
    z-index: 1;
}

.tabs input:checked + label {
    background: #fff url(http://imagehost.vendio.com/a/35153648/view/TAB-ACTIVE.jpg);
	z-index: 6;
}

.clear-shadow {
	clear: both;
}

.content {
    background: #fff;
	position: relative;
    width: 100%;
	height: 370px;
	z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
	top: 0;
	left: 0;
	padding: 10px 40px;
	z-index: 1;
    opacity: 0;
    width: 100%;

    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5,
.tabs input.tab-selector-6:checked ~ .content .content-6,
.tabs input.tab-selector-7:checked ~ .content .content-7 {
	z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;
}
.content div h2,
.content div h3{
	color: #398080;
}
.content table {
      margin: 0 auto;
  }
.content div p {
	font-size: 14px;
	line-height: 22px;
	text-align: center;
	color: #444;
        width: 70%;
	font-family: sans-serif;
        margin-left: 25%;
        margin-right: 25%;
        min-width: 70%;
        -moz-margin-start: auto;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................