JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<div class="input input--full">
    <span class="input__next pulled-right">Next</span>
    <input type="text" class="input__control" name="someval" />
</div>

CSS

/* line 1, ../../assets/sass/cartman/src/base/defaults/_forms.sass */
.input {
  border: 1px solid #00b1c1;
  text-align: left;
  overflow: hidden;
  padding-left: 13.33333px;
  padding-left: 0.66667rem;
  height: 54px;
  height: 2.7rem;
  line-height: 54px;
  line-height: 2.7rem;
  margin-bottom: 20px;
  margin-bottom: 1rem;
}
/* line 9, ../../assets/sass/cartman/src/base/defaults/_forms.sass */
.input .input__next {
  width: 120px;
  width: 6rem;
  cursor: pointer;
  background: #00b1c1;
  transition: all 0.2s;
  font-weight: 700;
}
/* line 17, ../../assets/sass/cartman/src/base/defaults/_forms.sass */
.input .input__control {
  border: 0;
}
/* line 19, ../../assets/sass/cartman/src/base/defaults/_forms.sass */
.input .input__control:focus + .input__next {
  background: #00838f;
}
.pulled-right {
  float: right;
}