JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset class="payment">
    <legend>Payment information</legend>
    <div class="payment_item">
        <label for="card_number">Card Number</label>
        <input type="text" id="card_number" name="card_number" title="Card Number" value="" class="">
        <div class="extra_info">
            Card type is detected automatically
        </div>
    </div>
    <div class="payment_item">
        <label for="card_ccv">Security Code</label>
        <input type="text" id="card_ccv" name="card_ccv" title="Security Code" value="" class="short">
        <div class="extra_info">
            (Example: 539)
        </div>
    </div>
    <div class="clear">
        &nbsp;
    </div>
    <div class="payment_item">
        <label for="card_exp_month">Expire Date</label>
        <select name="card_exp_month" id="card_exp_month" class="">
            <option selected="selected" disabled="disabled" value="NA">Month</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select name="card_exp_year" id="card_exp_year" class="">
            <option selected="selected" disabled="disabled" value="NA">Year</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option...

CSS

body  {
    font-family: Arial,"Helvetica  Neue",Arial,Helvetica,sans-serif;
    font-size:  11pt;
    letter-spacing:  0.7pt;
}
.payment {
    display:  inline-block;
    float: left;
    margin-bottom:  8px;
    width: 660px;
}
.payment_item  {
    display:  inline-block;
    margin-right:  24px;
    margin-top:  10px;
    vertical-align:  top;
}
.payment_item label  {
    display: block;
    font-weight:  bold;
    padding-bottom:  6px;
}
.payment_item input  {
    width: 220px;
}
.payment_item input.short {
    width:  120px;
}
.payment_item .extra_info {
    color: Silver;
    font-size:  90%;
    line-height:  1.6em;
    margin-top:  8px;
    max-width:  380px;
}
.payment_item select  {
    margin-right: 6px;
}
input, select, checkbox, textarea  {
    background-color: #F8F9FA;
    border: 1px solid silver;
}
input, textarea, select {
    padding:  4px;
}
input, textarea, select {
    font-family:  Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size:  100%;
    font-weight:  normal;
    letter-spacing:  0.08em;
}
fieldset  {
    background-color: #F3F5F8;
    border: 1px solid #EBEBEB;
    color: #666666;
    font-size:  90%;
    margin-top:  38px;
    padding: 4px 20px;
}
fieldset legend {
    background-color: #E7EDF3;
    border: 1px solid #D7D7D7;
    color: #666666;
    font-size:  90%;
    font-weight:  bold;
    line-height:  20px;
    margin-left:  0;
    padding: 0 10px;
}



.input_highlight
{
    border: solid 1px #cccccc;
    background-color:  red;
}

JavaScript

$('input, select,  textarea').focus(function() {
        $(this).addClass('input_highlight');
    }).blur(function() {
        $(this).removeClass('input_highlight');
    });