CSS3: вкладки (tabs) на чистом CSS

[Heidel]

HTML

<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 adipiscing elit. Sed quis ligula vel libero imperdiet gravida sed sit amet nibh. Mauris porta turpis sit amet vulputate mollis.</article>
    <article class="tab-2">Aliquam mi tortor, luctus blandit porta et, dignissim mattis lectus. Quisque rutrum vehicula sagittis. Vivamus mollis eros nec feugiat dapibus.</article>
    <article class="tab-3">Etiam sagittis et ante a lobortis. Nunc tincidunt feugiat turpis in sagittis. Cras placerat risus eget tellus porttitor, eu lacinia sem ullamcorper.</article>
  </div>
</div>

CSS

$bg: #2c3e50;
$font: #34495e;
$grey: #ecf0f1;
$accent: #e74c3c;

* {
  box-sizing: border-box;
}

body {
  background-color: $bg;
  font-family: Arial;
  font-size: 18px;
  color: $font;
  line-height: 1.5;
}

.wrapper {
  width: 80%;
  margin: 150px auto;
  
  input {
    display: none;
    
    &:checked + label{
      background-color: $accent;
      color: white;
    }
  }
  
  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;
  }
  
  label {
    cursor: pointer;
    display: inline-block;
    padding: 10px 40px;
    background-color: $grey;
    border-radius: 20px 20px 0 0;
  }
  
  .content {
    position: relative;
    
    article {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 70px 40px;
      border-top: 5px solid $accent;
      border-radius: 0 5px 5px;
      display: none;
    }
  }
}

https://jsfiddle.net/4wpz3rn2/57/

@темы: Верстка, Tabs, CSS3