JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<form>

  <div class="nyp">

    <label for="nyp">
      <span class="field-label">Enter a price</span>
      <span class="field-hint">Must be at least $49</span>
    </label>

    <input id='nyp' name='nyp' type='text' value='' class='input-text amount nyp-input text' aria-required="true" aria-invalid="false" />

  <span class="field-error" role="alert" style="display: block">Please enter a higher amount</span>

  </div>

  <button type="submit">
    Add to cart
  </button>

</form>

SCSS

label {
  display: block;

  .field-label {
    font-weight: bold;
    display: block;
  }

  .field-hint {
    font-size: 85%;
    display: block;
    opacity: .65;
  }
}

input {
  margin-bottom: .25em;

  &:focus {
    border: 2px solid black;

  }
  
}

.field-error {
  background: red;
  color: white;
  padding: .25em .5em;
  margin-bottom: .25em;

  &:before {
    display: 'inline-block';
    content: '!'; // Standin for a proper icon.
    margin-right: .5em;
    font-weight: 800;
  }
}