Код:

<style>
    .tabs {
      position: relative;   
      min-height: 200px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab1 {
      float: left;
    }
	.tab2 {
      float: right;
    }
	.tab1 label {
      margin-left: -1px;
      left: 1px;
	}
	.tab2 label {
	  margin-right: -18px;
      right: 18px;
	}
    .tab1 label, .tab2 label {
cursor: pointer;
      /* Скругляем верхние уголки */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
color: black;
  background: #8B668B;
      padding: 10px; 
      border: none;
 bottom: -5px;
      position: relative;
z-index: 5; 
    }
    .tab1 [type=radio], tab2 [type=radio] {
      display: none;   
    }
	.content1 {
	left: 0;
	}
	.content2 {
	right:0;
	}
    .content1, .content2 {
      position: absolute;
      top: 28px;
      width: 45%;
      background-color: #000000;

color: #fff;
      right: 0;
      bottom: 0;
      padding: 20px;
      border-color: #8B668B; 
	  border-width: 0 2px 2px 2px;
box-shadow: 0 7px 7px #8B668B, 0 -7px 7px #8B668B, 23px 0 20px -23px #8B668B;
border-style: groove;
	  overflow: hidden;
    }
    .content1 > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }

	.content2 > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(100%);
      -moz-transform:    translateX(100%);
      -ms-transform:     translateX(100%);
      -o-transform:      translateX(100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
	
    [type=radio]:checked ~ label {
      background-color: #000000;
box-shadow: 0 -7px 7px #8B668B, 23px 0 20px -23px #8B668B;
color: #fff;
      border: none;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content1, [type=radio]:checked ~ label ~ .content2 {
      z-index: 1;
    }
	[type=radio]:checked ~ label ~ .content1 > *, [type=radio]:checked ~ label ~ .content2 > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
	</style>
	
	<div class="tabs">
  <div class="tab2">
       <input type="radio" id="tab-4" name="tab-group-2" checked>
       <label for="tab-4"><span>Закладка №1</span></label>
       
       <div class="content2">
           <p>Содержание закладки №1</p>
       </div> 
   </div>
    
   <div class="tab2">
       <input type="radio" id="tab-5" name="tab-group-2">
       <label for="tab-5"><span>Закладка №2</span></label>
       
       <div class="content2">
           <p>Содержание закладки №2</p>
           
           <img src="http://placekitten.com/200/100">
       </div> 
   </div>
    
    <div class="tab2">
       <input type="radio" id="tab-6" name="tab-group-2">
       <label for="tab-6"><span>Закладка №3</span></label>
     
       <div class="content2">
           <p>Содержание закладки №3</p>
           
           <img src="http://placedog.com/200/100">
       </div> 
   </div>

 <div class="tab1">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1" class="active"><span>Закладка №1</span></label>
       
       <div class="content1">
           <p>Содержание закладки №1</p>
       </div> 
   </div>
    
   <div class="tab1">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2"><span>Закладка №2</span></label>
       
       <div class="content1">
           <p>Содержание закладки №2</p>
           
           <img src="http://placekitten.com/200/100">
       </div> 
   </div>
    
    <div class="tab1">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3"><span>Закладка №3</span></label>
     
       <div class="content1">
           <p>Содержание закладки №3</p>
           
           <img src="http://placedog.com/200/100">
       </div> 
   </div>
</div>