JSFiddle - React, Tailwind, and code Playground

Tab group

by tonytlwu

HTML

<section class="tab-group">
  <label class="tab">
    <input type="radio" name="group-tabs" value="" checked />
    <span class="control-label">Direct Messages</span>
  </label>
  <label class="tab">
    <input type="radio" name="group-tabs" value="1" />
    <span class="control-label">Public Channels</span>
  </label>
</section>

CSS

/* Tab groups */

.tab-group {
  position: relative;
  margin-bottom: 10px;
  display: flex;
  max-width: 100%;
  overflow: auto;
}

.tab-group .tab {
  display: inline-block;
  margin: 0;
  padding: 0;
  flex: 1;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tab-group .tab + .tab {
  margin-left: -1px;
}

.tab-group .tab input[type="radio"],
.tab-group .tab input[type="checkbox"] {
  display: block;
  opacity: 0.01;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.tab-group .tab > .control-label {
  border: 1px solid #dbdedf;
  color: #dbdedf;
  text-align: center;
  display: block;
  line-height: 1.42857143;
  padding: 8px 16px;
}

.tab-group .tab:first-child > .control-label {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.tab-group .tab:last-child > .control-label {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.tab-group .tab input:checked + .control-label,
.tab-group .tab.active .control-label{
  border-color: #337ab7;
  background: #337ab7;
  color: #fff;
}