JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<input class="aui-input-box" group-class="red">
<input class="aui-input-box" label="Parents">
<input type="date" class="aui-input-box" label="Parents">
<input type="button" class="aui-input-button" value="Button">
<input type="button" class="aui-input-button-negative" value="Button">

CSS

input.aui-input-box{
    cursor: pointer;
    border: solid 1px gainsboro;
    width: 100%;
    background: gainsboro;
    padding: 0 10px;
    box-sizing: border-box;
    height: 30px;
    outline: none;
    display: block;
    position: relative;
}
input.aui-input-box:focus{
    border: solid 1px #0066ad;
    background: transparent;
    cursor: text;
}
input[type="button"].aui-input-button, input[type="button"].aui-input-button-negative{
    background: #0066ad;
    border: none;
    height: 30px;
    width: auto;
    box-sizing: border-box;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    display: block;
    color: #ffffff;
    position: relative;
    font-weight: bolder;
}
input[type="button"].aui-input-button-negative{
    background: transparent;
    border: solid 1px #0066ad;
    color: #0066ad;
}
.aui-form-group{
}
.aui-form-group input{
    width: 100%;
}
.aui-form-group label{
    display: block;
    width: 100%;
    cursor: pointer;
}
.aui-input-box::-webkit-datetime-edit {  }
.aui-input-box::-webkit-datetime-edit-fields-wrapper {  }
.aui-input-box::-webkit-datetime-edit-text {  }
.aui-input-box::-webkit-datetime-edit-month-field {  }
.aui-input-box::-webkit-datetime-edit-day-field {  }
.aui-input-box::-webkit-datetime-edit-year-field {  }
.aui-input-box::-webkit-inner-spin-button { display: none; }
.aui-input-box::-webkit-clear-button { display: none; }
.aui-input-box:focus::-webkit-clear-button { background: #0066ad; }
.aui-input-box::-webkit-calendar-picker-indicator {
    background: gray;
    cursor: pointer;
    width: 10px;
    height: 10px;
    margin-right: -10px;
    padding: 10px;
    color: #ffffff;
}
.aui-input-box:focus::-webkit-calendar-picker-indicator { background: #0066ad; }

JavaScript

$('input.aui-input-box').click(function(){
    $(this).select();
}).keypress(function(e) {
	if(e.which == 13) {
		$(this).blur();
	}
});
$('input.aui-input-box').each(function(i){
    var theInput = $(this);
    if(theInput.attr('label')){
        var theLabel = theInput.attr('label');
        if(theInput.attr('group-class')){
			theClasses = ' '+theInput.attr('group-class');
        }else{
            theClasses = ''
        };
        if(theInput.attr('id')){
			theID = ' for="'+theInput.attr('id')+'"';
        }else{
            theID = ''
        };
        theInput.wrap('<div class="aui-form-group'+theClasses+'"></div>')
        theInput.before('<label'+theID+'>'+theLabel+'</label>');

    }else{
        if(theInput.attr('group-class')){
			theInput.removeAttr('group-class');
        }
    }
});
$('div.aui-form-group label').on('click',function(){
    $(this).parent().find('input.aui-input-box').focus().select();
});