<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 -->

* {
  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;
  
  label {
    cursor:pointer;
    float: left;
    margin-right: 5px;
    display: block;
    padding: 10px 40px;
    background-color: #ecf0f1;
    border-radius:20px 20px 0 0;
  }
  
  input {
    display: none;
    &:checked + label {
      background-color: #e74c3c;
      color:#fefefe;
    }
  }//input
  
  input[id="tab-1"]:checked ~ .content .tab-1,
  input[id="tab-2"]:checked ~ .content .tab-2,
  input[id="tab-3"]:checked ~ .content .tab-3{
    display: block;
  }
  
  .content {
    clear:both;
    position: relative;
  }
  
  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;
  }
}//wrapper