JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<br/><br/>
<div class="tabs">
  <div class="tab-button-outer">
    <ul id="tab-button">
      <li><a href="#tab01" class="target-tab-1">Tab 1</a></li>
      <li><a href="#tab02" class="tab-2">Tab 2</a></li>
      <li><a href="#tab03">Tab 3</a></li>
      <li><a href="#tab04">Tab 4</a></li>
      <li><a href="#tab05">Tab 5</a></li>
    </ul>
  </div>
  <div class="tab-select-outer">
    <select id="tab-select">
      <option value="#tab01">Tab 1</option>
      <option value="#tab02">Tab 2</option>
      <option value="#tab03">Tab 3</option>
      <option value="#tab04">Tab 4</option>
      <option value="#tab05">Tab 5</option>
    </select>
  </div>

  <div id="tab01" class="tab-contents">
    <h2>Tab 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.
    
      <a href="#tab02" class"target-tab-2">A link to tab 2</a> something more.
    </p>
  </div>
  <div id="tab02" class="tab-contents">
    <h2>Tab 2</h2>
    <p>Some other content </p>
  </div>
  <div id="tab03" class="tab-contents">
    <h2>Tab 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
  </div>
  <div id="tab04" class="tab-contents">
    <h2>Tab 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
  </div>
  <div id="tab05" class="tab-contents">
    <h2>Tab 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam...

CSS

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

.tabs {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

#tab-button {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tab-button li {
  display: table-cell;
  width: 20%;
}

#tab-button li a {
  display: block;
  padding: .5em;
  background: #eee;
  border: 1px solid #ddd;
  text-align: center;
  color: #000;
  text-decoration: none;
}

#tab-button li:not(:first-child) a {
  border-left: none;
}

#tab-button li a:hover,
#tab-button .is-active a {
  border-bottom-color: transparent;
  background: #fff;
}

.tab-contents {
  padding: .5em 2em 1em;
  border: 1px solid #ddd;
}



.tab-button-outer {
  display: none;
}

.tab-contents {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .tab-button-outer {
    position: relative;
    z-index: 2;
    display: block;
  }

  .tab-select-outer {
    display: none;
  }

  .tab-contents {
    position: relative;
    top: -1px;
    margin-top: 0;
  }
}