JSFiddle - React, Tailwind, and code Playground

by e_kurbanov

HTML

<div class="switch-button-container two-items">
  <span class="switch-element label">
    Select transaction type:
  </span>
  <label class="switch-element btn">
    <input type="radio" name="transactionType" checked>
    <span class="custom-radio">Sale</span>
  </label>
  <label class="switch-element btn">
    <input type="radio" name="transactionType">
    <span class="custom-radio">Rent</span>
  </label>
</div>

CSS

.switch-button-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 200px;
  line-height: 40px;
  bordeR: 2px solid red;
  padding: 5px;
}
.switch-button-container * {
  box-sizing: border-box;
}
.switch-element {
  position: relative;
  display: block;
  float: left;
  height: 100%;
  font-size: 0.875em;
}
.switch-element.label {
  width: 60% !important;
}
.switch-element.btn {
  height: 40px;
}


.switch-button-container.two-items .switch-element.btn { width: 20% }
.switch-button-container.three-items .switch-element { width: 33% }
.switch-button-container.four-items .switch-element { width: 25% }

.switch-element .custom-radio {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: block;
  background: #EEEEEF;
  text-align: center;
  color: #9A9A9A;

}

.switch-element input:checked+.custom-radio {
  background: #F4727C;
  color: #fff;

box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.3);
}