JSFiddle - React, Tailwind, and code Playground

by Shawn Wood

HTML

<div class="flight-types">
  <input type="radio" class="segment-input" name="flight-type" value="coach" id="coach"  />
  <label class="segment" for="coach">
      Knive
  </label>

  <input type="radio" class="segment-input" name="flight-type" value="business" id="business"  />
  <label class="segment" for="business">
      Fork
  </label>

  <input type="radio" class="segment-input" name="flight-type" value="first" id="first" checked />
  <label class="segment" for="first">
      Spoon
  </label>
</div>

SASS

=segmented-controls($amount: 2, $width: 80px, $margin: 2px, $active: inherit)
  $_margin: $margin * 2
  $_width: 100% / $amount

  display: flex
  max-width: $width * $amount
  width: 100%
  user-select: none
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  position: relative
  z-index: 1
  background-color: #f4f4f4
  > .segment-input
    display: none
    &:checked + label
      color: $active
    @for $i from 1 through $amount
      $index: $i - 1
      &:nth-of-type(#{$i}):checked
        ~ .segment:last-of-type:before
          transform: translateX(calc(#{100 * $index}% + #{$_margin * $index}))
  .segment
    flex: 1
    text-align: center
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    cursor: pointer
    // we use the last label's pseudo element as the active state
    // to eliminate the need for an arbitrary element
    &:last-of-type:before
      content: ""
      display: block
      max-width: calc(#{$_width} - #{$_margin})
      margin: $margin
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      z-index: -1
      transform: translateX(0)
      

.flight-types
  +segmented-controls(3, 112px, 0px, #000)
  margin: 0 auto
  font-size: 12px
  border: 1px solid #e3e3e3
  border-radius: 0.26em
  color: #000
  .segment
    padding: 6px 3px
    transition: color 250ms cubic-bezier(0,.95,.38,.98)
    &:before
      background: #fff
      border-radius: 0.26em
      border: 1px solid #ccc
      transition: all 250ms cubic-bezier(0,.95,.38,.98)
      margin-top: 5px
      margin-bottom: 5px
    &:not(:last-child)
      border-right: 1px solid #ccc
      border-left: none
      
    
body,
html
  width: 100%
  height: 100%
  overflow: hidden
    
body
  display: flex
  justify-content: center
  align-items: center
  padding: 12px
  background-color: #fff