CodePen

HTML

            
              <ul class="tab-headers">
  <li><a href="#disclaimer">Disclaimer</a></li>
  <li><a href="#terms">Terms of Use</a></li>
  <li><a href="#privacy">Privacy Policy</a></li>
</ul>
<div class="tab-panes">
  <div id="disclaimer" class="tab-pane">
    <h3>Disclaimer</h3>
    <p>A determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process — if the actual status cannot be calculated, an indeterminate progress bar should be used to provide user feedback.</p>
  </div>
  <div id="terms" class="tab-pane">
    <h3>Terms of Use</h3>
    <p>A determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process — if the actual status cannot be calculated, an indeterminate progress bar should be used to provide user feedback.</p>
  </div>
  <div id="privacy" class="tab-pane">
    <h3>Privacy Policy</h3>
    <p>A determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process — if the actual status cannot be calculated, an indeterminate progress bar should be used to provide user feedback.</p>
  </div>
</div>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .tab-headers {
  list-style: none;
  overflow: hidden;
  height: 30px;
}
.tab-headers li {
  display: inline-block;
  margin-right: 5px;
}
.tab-headers li a {
  display: block;
  color: #0177b3;
  font-family: "PT Sans", sans-serif;
  font-size: 18px;
  text-decoration: none;
  border: 1px solid #b5d0e4;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 6px 13px 8px;
  background-color: #d3edff;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyMSA0MyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMGIwYzBjIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMjEiIGhlaWdodD0iNDMiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
  background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.05) 0%, rgba(12, 13, 13, 0.05) 100%);
  background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.05) 0%, rgba(12, 13, 13, 0.05) 100%);
  background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.05) 0%, rgba(12, 13, 13, 0.05) 100%);
  background-image: linear-gradient(bottom, rgba(255, 255, 255, 0.05) 0%, rgba(12, 13, 13, 0.05) 100%);
}
.tab-headers li a.active {
  color: #fff;
  border: 1px solid #1B8FD5;
  background-color: #1d97d7;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDExNCAzOSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNzA4MDgiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTE0IiBoZWlnaHQ9IjM5IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, rgba(8, 8, 8, 0.1) 100%);
  background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, rgba(8, 8, 8, 0.1) 100%);
  background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, rgba(8, 8, 8, 0.1) 100%);
  background-image: linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, rgba(8, 8, 8, 0.1) 100%);
}
.tab-panes {
  position: relative;
}
.tab-pane {
  display: none;
}
.tab-pane:first-child {
  display: block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*$(".tab-panes").hide();
$(".tab-panes:first").show();
$(".tab-headers a").on("click", function() {
  var activeTab = $(this).attr("href");
  $(this).toggleClass("active");
   $(".tab-pane").hide(); 
     $(activeTab).show();

})*/ 
$(".tab-pane").not(":first").hide();
$(".tab-headers a").filter(":first").addClass("active");

$(".tab-headers a").on("click", function() {
  $(".tab-pane").hide();
  $(".tab-headers a").removeClass("active");

  var activeTab = $(this).attr("href");
  $(this).addClass("active");
  $(activeTab).show();
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................