tabs html+css

index.html

                <div class="tabs-widget">
                    <div class="header">
                        <a href="#tab-1-1">Первая вкладка</a>
                        <a href="#tab-1-2">Вторая вкладка</a>
                        <a href="#tab-1-3">Третья вкладка</a>
                    </div>
                    <div class="content">
                        <div id="tab-1-1" class="scroller"></div>
                        <div class="item">
                            <p>Это первая вкладка этого классного виджета табов.</p>
                        </div>
                        <div id="tab-1-2" class="scroller"></div>
                        <div class="item -default">
                            <p>Это вторая вкладка этого классного виджета табов.</p>
                        </div>
                        <div id="tab-1-3" class="scroller"></div>
                        <div class="item">
                            <p>Это третья вкладка этого классного виджета табов.</p>
                        </div>
                    </div>
                </div>

style.css

.clearfix:before,
.clearfix:after,
.tabs-widget > .header:before,
.tabs-widget > .header:after {
  display: table;
  content: "";
}
.clearfix:after,
.tabs-widget > .header:after {
  clear: both;
}
.tabs-widget {
  position: relative;
}
.tabs-widget > .header {
  background-color: #3f51b5;
}
.tabs-widget > .header a {
  float: left;
  padding: 10px 20px;
  color: #ffffff;
}
.tabs-widget > .header a:focus,
.tabs-widget > .header a:hover {
  background-color: #32408f;
}
.tabs-widget > .content {
  position: relative;
}
.tabs-widget > .content > .scroller {
  display: none;
}
.tabs-widget > .content > .scroller:target + .item {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}
.tabs-widget > .content > .scroller:target + .item.-default {
  position: relative;
}
.tabs-widget > .content > .item {
  background-color: #ffffff;
  color: #333333;
  padding: 20px;
  display: none;
  max-height: 384px;
  overflow-y: auto;
}
.tabs-widget > .content > .item.-default {
  display: block;
  z-index: 1;
}