JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<!DOCTYPE html>
<html class="no-js">
    <head>
    </head>
    <body>
        <form method="">
            <fieldset>
                <input id="search" type="text" value="" class="text-input-1" />
                <label class="search-title" for="search">Search me baby</label>
            </fieldset>
        </form>
    </body>

CSS

.search-title {
    color: rgba(0, 0, 0, 0);
    font-size: 20px;
    font-weight: 300;
    margin-left: -30px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

.text-input-1:focus ~ label {
    color: #F70;
    margin-left: 35px;
}