JSFiddle - React, Tailwind, and code Playground

by rjzaworski

HTML

<label for="foo">Pick one</label>
<select id="foo" name="foo">
  <option>option "A"</option>
  <option>option "A"</option>
  <option>option "A"</option>
</select>
<div class="hint">Option "A" is a good one.</div>

CSS

html { font:9pt arial, sans-serif; margin:20px; }
select, .hint { display:block; margin-left:80px; }
label { float:left; }

.hint { 
    opacity:0;
}

select:focus + .hint {
    opacity:1;
    position:relative;
    top: -40px;
    transition: opacity 0.5s linear;
    -webkit-transition: opacity 0.5s linear;
    -moz-transition: opacity 0.5s linear;
}