JSFiddle - React, Tailwind, and code Playground

HTML

<div class="quick">
    <h1>Quick</h1>
    
    <!-- FORM -->
    <div>
        <label for="name">Name</label>
        <input type="text" name="name" value="" />
    </div>
    <div>
        <label for="email">Email</label>
        <input type="text" name="email" value="" />
    </div>
    <div>
        <label for="phone">Phone</label>
        <input type="text" name="phone" value="" />
    </div>
    
    <div class="topMargin"></div>
    
    <div>
        <label for="description">Description</label>
        <input type="text" name="description" />
    </div>
    <div>
        <label for="category">Category</label>
        <input type="text" name="category" />
    </div>
    <div>
        <label for="asset1">Item Nuber</label>
        <input type="text" name="asset1" value="036530" />
        <input type="text" name="asset2" />
    </div>
    
    <div class="topMargin"></div>
    
    <div>
        <label for="comment">Comment</label>
        <textarea name="comment"></textarea>
    </div>
    <div>
        <label for="attachment">Attachment</label>
        <input type="file" name="category" />
    </div>
    
    <div>
        <label> &nbsp; </label>
        <input id="submit" type="submit" value="Create New" />
    </div>
    
    <!-- /FORM -->
    
</div>

CSS

body { background: #ddd;}
.quick { background-color: #dddddd; min-height: 500px; display: block; color: #797b82; padding: 10px 0px 0px 30px;}
.quick h1 { padding-bottom: 20px;}
.quick div { border: 1px solid #ddd; display: block; padding: 6px 0px; margin: 0px 40px 0px 0px;}
.quick div.focus { border: 1px solid #b7b7b7; background-color: #f6e677;}
.quick div.topMargin { margin-top: 20px;}
.quick div label { display: inline-block; float: left; color: #797b82; font-size: 14px; line-height: 28px; width: 20%; text-align: right; padding-right: 5px;}

.quick div input, .quick div textarea { height: 20px; border: 1px solid #9c9c9c; padding: 3px; font-size: 14px; line-height: 20px;}
.quick div input { width: 40%;}
.quick div input[name*="asset"] { width: 25%;}
.quick div input[type="file"] { -webkit-appearance: input;}
.quick div textarea { width: 51.5%; min-height: 150px;}

.quick #submit { height: 28px; line-height: 28px; opacity: .7; filter: alpha(opacity = 70); cursor: pointer; background-color: #fbe863; color: #000; padding: 3px 10px; border: 1px solid #a2a1a2;}
.quick #submit:hover {opacity: 1; filter: alpha(opacity = 100);}

JavaScript

$(document).ready(function() {

    $('.quick div input, .quick div textarea').live('focus', function() {
        var a = $(this).attr('id');
        var b = 'submit';

        $('.quick .focus').removeClass('focus');
        if (a == b) {
            return false;
        } else {
            $(this).parent().addClass('focus');
        }
    });


    $('input:text[value=""]:first').focus();
});