JSFiddle - React, Tailwind, and code Playground

Tab styles

by Sascha

HTML

<h2>
  Proposal 1
</h2>
<div class="frame">


  <div class="tab-bar">
    <div class="tab active">
      Overall
    </div>
    <div class="tab">
      Technical
    </div>
    <div class="tab">
      Organizational
    </div>
    <div class="extra-tab">
      <label>
      <input type="checkbox"/> Show Details *
    </label>
    </div>
  </div>
  <p>
    <img style="width: 100%" src="https://wp-assets.highcharts.com/blog/wp-content/uploads/2016/08/04135759/chart-4.png" />
  </p>
</div>
<p>
</p>
<h2>
  Proposal 2
</h2>
<div class="frame">
  <div class="open-tab-bar">
    <div class="tab active">
      Overall
    </div>
    <div class="tab">
      Technical
    </div>
    <div class="tab">
      Organizational
    </div>
    <div class="extra-tab">
      <label>
      <input type="checkbox"/> Show Details *
    </label>
    </div>
  </div>
  <p>
    <img style="width: 100%" src="https://wp-assets.highcharts.com/blog/wp-content/uploads/2016/08/04135759/chart-4.png" />
  </p>
</div>

<p>
  * = the check box style will be changed to match the overall in the Feature Branch.
</p>

CSS

html,
body {
  margin: 0;
  padding: 0;
  font-family: Segoe UI WestEuropean, Segoe UI, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  background: #d0d0ef;
}

p,
h2 {
  padding: 5px;
  padding-left: 10px;
}

.frame {
  border: 2px solid blue;
  background: white;
}

.tab-bar {
  width: 100%;
  background: #f2f4f2;
  border: 1px solid #ccc;
  display: flex;
  border-collapse: collapse;
}

.tab-bar .tab,
.tab-bar .extra-tab {
  width: 100%;
  border: 1px solid #ddd;
  background: #A9A8AD;
  color: #eee;
  flex-basis: 0;
  flex-grow: 1;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 15px;
  padding-left: 15px;
  transition: 0.2s ease;
}

.tab-bar .extra-tab,
.tab-bar .tab:hover {
  background: #eee;
  color: #A9A8AD;
  cursor: pointer;
}

.tab-bar .tab.active {
  background: #3298dc;
  color: white;
}

/* Second proposal */

.open-tab-bar {
  width: 100%;
  background: white;
  display: flex;
  border-collapse: collapse;
}

.open-tab-bar .tab {
  width: 100%;
  background: #f2f4f2;
  color: #999;
  flex-basis: 0;
  flex-grow: 1;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 15px;
  padding-left: 15px;
  transition: 0.2s ease;
  border: 1px solid #A9A8AD;
}

.open-tab-bar .tab,
.open-tab-bar .extra-tab {
  flex-basis: 0;
  flex-grow: 1;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 15px;
  padding-left: 15px;
}

.open-tab-bar .tab.active {
  color: #444;
  background: white;
  border: 1px solid #A9A8AD;
  border-bottom: none;
}

.open-tab-bar .tab:not(.active):hover {
  color: #444;
  background: white;
  border: 1px solid #A9A8AD;
}

.open-tab-bar .extra-tab {
  border: 1px solid #A9A8AD;
}

.open-tab-bar .tab:hover {
  cursor: pointer;
}

JavaScript

$('.tab-bar').on('click', '.tab', function() {
  $('.tab-bar .active').toggleClass('active');
  $(this).addClass('active');
});
$('.open-tab-bar').on('click', '.tab', function() {
  $('.open-tab-bar .active').toggleClass('active');
  $(this).addClass('active');
});