JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="rib-input-range">
  <div class="from focus">
    <!-- Set class focus when field is in focus nad class used after the field has value  -->
    <label>From</label>
    <input type="text">
  </div>
  <div class="to used">
    <!-- Set class focus when field is in focus nad class used after the field has value  -->
    <label>To</label>
    <input type="text">
  </div>
</div>

SCSS

/*DONT INCLUDE*/
* {
  box-sizing: border-box;
}

/*INCLUDE FROM HERE*/
.rib-input-range {
  position: relative;
  overflow: hidden;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  .from,
  .to {
    width: 50%;
    float: left;
    position: relative;
    height: 40px;
    background-color: #ffffff;
    border-top: 1px solid #e7e7e7;
    border-top: 1px solid #e7e7e7;
    &:after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      margin: 0 auto;
      z-index: 150;
    }
    label {
      position: absolute;
      left: 10px;
      bottom: 9px;
      font-size: 13px;
      z-index: 100;
      pointer-events: none;
    }
    input {
      font-size: 13px;
      height: 38px;
      padding: 0 10px;
      border: none;
      padding-top: 15px;
      width: 100%;
    }
    &.focus {
      &:after {
        height: 2px;
        width: 100%;
        background-color: blue;
      }
      label {
        bottom: 21px;
        font-size: 11px;
        padding: 0;
        color:blue;
      }
    }
    &.used {
      &:after {
        height: 2px;
        width: 100%;
        background-color: grey;
      }
      label {
        bottom: 21px;
        font-size: 11px;
        padding: 0;
      }
    }
  }
}