Css Tabs

by humanzing

HTML

<div class="panel">
<div class="top">
<a href="#tab1">tab1</a>
<a href="#tab2">tab2</a>
</div>
<div id="tab1" class="tab">tab1</div>
<div id="tab2" class="tab">tab2</div>
</div>

CSS

.panel{
  width:100%;
    background: rgb(38, 45, 51);
  height:100vh;
}
.panel > .top{
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  text-align:center;
 
}
.panel > .top > a {
   color: #fff;
       
}
.panel > .top > a:target{
  color: rgb(245, 188, 0);
}
.tab {
    display:none;
}
.tab:target {
    display:block;
}
.select{
      color: rgb(245, 188, 0);
}