tabs

by vi161

HTML

<div class="tabs">
        <div class="tab" id="tab1">
            <a class="tab-item" href="#tab1">Tab 1</a>
            <div class="tab-content">
                Content of Tab1
            </div>
        </div>

        <div class="tab" id="tab2">
            <a class="tab-item" href="#tab2">Tab 2</a>
            <div class="tab-content">
                Content of Tab2
            </div>
        </div>

        <div class="tab" id="tab3">
            <a class="tab-item" href="#tab3">Tab 3</a>
            <div class="tab-content">
                Content of Tab3
            </div>
        </div>

        <div class="tab" id="tab4">
            <a class="tab-item" href="#tab3">Tab 4</a>
            <div class="tab-content">
                Content of Tab3
            </div>
        </div>

        <div class="tab" id="tab5">
            <a class="tab-item" href="#tab3">Tab 5</a>
            <div class="tab-content">
                Content of Tab3
            </div>
        </div>
    </div>

CSS

@font-face {
  font-family: 'LatoBold';
  src: url('../fonts/LatoBold.eot');
  src: url('../fonts/LatoBold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/LatoBold.woff') format('woff'),
  url('../fonts/LatoBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'LatoRegular';
  src: url('../fonts/LatoRegular.eot');
  src: url('../fonts/LatoRegular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/LatoRegular.woff') format('woff'),
  url('../fonts/LatoRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  //font-family: "Open Sans";
  font-family: "LatoRegular";
  margin: 0 auto;
  background: #ffffff;
  letter-spacing: 0.2px;
  //overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.main {
  width: 100%;
}

.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

//------------------
.tabs {
  position: relative;
  clear: both;
  width: 100%;
  height: 20px;
}

.tabs .tab {
  float: left;
  width: 20%;
  border: 1px solid;
  border-right: 0;
}
.tabs .tab:last-child {
  border-right: 1px solid;
}
.tab-content {
  position: absolute;
  background-color: white;
  width: 100%;
  height: 200px;
  left: 0px;
  border: 1px solid;
}


.tabs .tab:nth-of-type(1) .tab-content {
  z-index: 1;
}

.tab:target a {
  font-weight: bold;
  background-color: gainsboro;

}

.tab:target .tab-content {
  z-index: 1;
}

.tab-item {
  display: inline-block;
  width: 100%;
  height: 100%;
}