JSFiddle - React, Tailwind, and code Playground

by brombomb

HTML

<div class="practice-picker">
  <div class="practice-picker-time">
    <span class="practice-picker-time__label">I have</span>
    <div class="practice-picker-time__item">
      <input type="radio" name="practice-picker-time__item" vlaue="5" id="time-5">
      <label for="time-5">5 min</label>
    </div>
    <div class="practice-picker-time__item">
      <input type="radio" name="practice-picker-time__item" vlaue="15" id="time-15">
      <label for="time-15">15 min</label>
    </div>
    <div class="practice-picker-time__item">
      <input type="radio" name="practice-picker-time__item" vlaue="20-30" id="time-20-30">
      <label for="time-20-30">20-30 min</label>
    </div>
    <div class="practice-picker-time__item">
      <input type="radio" name="practice-picker-time__item" vlaue="45 - 60" id="time-45 - 60">
      <label for="time-45 - 60">45 - 60 min</label>
    </div>
    <div class="practice-picker-time__item">
      <input type="radio" name="practice-picker-time__item" vlaue="60+" id="time-60+">
      <label for="time-60+">60+ min</label>
    </div>
  </div>
</div>

SCSS

* {
  box-sizing
}
.practice-picker {
  margin-left: 0;
  margin-right: 0;
  border-style: solid;
  border-width: 0 0 0 15px;
  border-image-source: linear-gradient(to bottom, #01c599, #0388cc);
  border-image-slice: 1;

  form {
    margin-left: 40px;
  }

  &-time,
  &-practice,
  &-style {
    line-height: 36px;
    padding: 20px 0;
  }

  &-time__label,
  &-practice__label,
  &-style__label {
    font-weight: bold;
  }

  &-time__item {
    display: inline-block;

    label {
      color: #0388cc;
      border: solid 2px #0388cc;
      border-radius: 20px;
      text-align: center;
      width: 150px;
      height: 40px;
      margin: 0 10px;
      display: inline-block;
      cursor: pointer;
    }

    & input:checked + label {
      border: none;
      color: #fff;
      font-weight: bold;
      background-image: linear-gradient(281deg, #0388cc, #01c599);
      line-height: 40px;
    }

    input {
      visibility: hidden;
    }
  }
}