JSFiddle - React, Tailwind, and code Playground

by fcothiagofreitas

HTML

<input type="text" name="search_cursos" id="search_cursos" placeholder="Procure a vaga que deseja" class="procurarvaga">

SCSS

@mixin opacity($opacity) {
      opacity: $opacity;
      // IE8 filter
      $opacity-ie: ($opacity * 100);
      filter: alpha(opacity=$opacity-ie);
    }

    @mixin placeholder {
      ::-webkit-input-placeholder {@content}
      :-moz-placeholder           {@content}
      ::-moz-placeholder          {@content}
      :-ms-input-placeholder      {@content}
    }

input.procurarvaga{
  text-align: center;
  &:focus{
    @include placeholder {
      @include opacity(.2);
    }
  }
}