<h1>Fluid responsive CSS only Tabs using :target</h1>
<h2>Modern browsers only</h2>
<div id="tabwrap" class="tabwrap">
  <div id="tab1" class="tabfixed"></div>
  <div id="tab2" class="tabfixed tabfixed2"></div>
  <div id="tab3" class="tabfixed tabfixed2"></div>
  <div id="tab4" class="tabfixed tabfixed2"></div>
  <nav class="tabtop"> <a class="tabtop1" href="#tab1">Tab #1 Title 1</a> <a class="tabtop2" href="#tab2">Tab #2 Title 2</a> <a class="tabtop3" href="#tab3">Tab #3 Title 3</a> <a class="tabtop4" href="#tab4">Tab #4 Title 4</a> </nav>
  <div class="tabs">
    <div class="content content1">
      <div class="content-inner">
        <h2>Tab 1 heading</h2>
        <p> Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content
          Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab
          Content Here Add Tab Content Here </p>
      </div>
    </div>
    <div class="content content2">
      <div class="content-inner">
        <h2>Tab 2 heading</h2>
        <p> Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content
          Here Ad </p>
      </div>
    </div>
    <div class="content content3">
      <div class="content-inner">
        <h2>Tab 3 heading</h2>
        <p> Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content
          Here Ad </p>
      </div>
    </div>
    <div class="content content4">
      <div class="content-inner">
        <h2>Tab 4 heading</h2>
        <p> Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content
          Here Ad </p>
      </div>
    </div>
  </div>
</div>
<p>The downside of target is that you will lose the current tab <a href="#">if you link to something else</a> on the page or indeed something in the tab.</p>
<p>See the <a target="_blank" href="https://codepen.io/paulobrien/pen/MYMymv">checkbox example</a> if you don't mind abusing checkboxes to solve the problem</p>
/* apply a natural box layout model to all elements */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.tabfixed {
  position: fixed;
  width: 1px;
  height: 1px;
  z-index: -1;
  opacity: 0;
  overflow: hidden;
}
.tabtop a {
  float: left;
  border: 1px solid #000;
  background: #08c;
  color: #fff;
  padding: 5px 10px;
  overflow: hidden;
  cursor: pointer;
}
.tabtop a:focus,
.tabtop a:active {
  background: blue;
}
.tabwrap {
  overflow: hidden;
  width: 100%;
}
.tabs {
  display: table;
  width: 100%;
  white-space: nowrap;
  clear: both;
  border-bottom: 1px solid #000;
  word-spacing: -0.25em;
}
.content {
  display: inline-block;
  vertical-align: top;
  border: 1px solid #000;
  border-bottom: none;
  white-space: normal;
  width: 100%;
  margin-right: -100%;
  word-spacing: 0;
}
.content-inner {
  padding: 10px;
}
.content-inner {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  transition: all 0.6s ease;
}
/* First tab to show by default */
#tab1 ~ .tabs .content1 .content-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
#tab1 ~ .tabtop .tabtop1 {
  background: blue;
}

/* set target tabs */
#tab1:target ~ .tabs .content1 .content-inner,
#tab2:target ~ .tabs .content2 .content-inner,
#tab3:target ~ .tabs .content3 .content-inner,
#tab4:target ~ .tabs .content4 .content-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
#tab1:target ~ .tabtop .tabtop1,
#tab2:target ~ .tabtop .tabtop2,
#tab3:target ~ .tabtop .tabtop3,
#tab4:target ~ .tabtop .tabtop4 {
  background: blue;
}
/* need extra code to get rid of default when others active */
#tabwrap .tabfixed2:target ~ .tabs .content1 .content-inner {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
#tabwrap .tabfixed2:target ~ .tabtop .tabtop1 {
  background: #08c;
}
/*   */

@media screen and (max-width: 760px) {
  .tabtop a {
    float: none;
    display: block;
  }
  .tabs {
    display: block;
    font-size: 0;
  }
  .content {
    font-size: 16px;
    font-size: 1rem;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.