JSFiddle - React, Tailwind, and code Playground

by e_kurbanov

HTML

<div class="form">
  <div class="custom-radio-container">
    <span class="label">Transaction Type</span>
    <label>
      <input type="radio" name="test" checked>
      <span class="overlay"></span>
    </label>
    <label>
      <input type="radio" name="test">
      <span class="overlay"></span>
    </label>
  </div>

</div>

CSS

body {
  background: #F0F0F0;
}

div.form {
  border: 1px solid #ccc;
  background: #fff;
  width: 500px;
  height: 500px;
  margin: 50px auto;
}
div.custom-radio-container {
  display: table;
  border-spacing: 10px 0px;
  table-layout: fixed;
  width: 400px;
  height: 40px;
  margin: 0 auto;
}
div.custom-radio-container > * {
  display: table-cell;
}
div.custom-radio-container .label {
 text-align: center;
 vertical-align: middle;
 font-size: 0.8em;
 color: #777;
}
div.custom-radio-container label {
  position: relative;
  
}
div.custom-radio-container .overlay {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #555; 
}
div.custom-radio-container input:checked + .overlay {
  background: #FF7171; 
}