JSFiddle - React, Tailwind, and code Playground

by Milos Draca

HTML

<div class="formTbl" style="width:650px;">
  <div class="frRow">
    <div class="frCell" style="width:85px;">
      <select name="studMenu" id="studMenu">
        <option value="1">Name</option>
        <option value="3">DOB</option>
        <option value="4">Gender</option>
        <option value="5">Nationality</option>
      </select>
    </div>
    <div class="frCell" style="width:175px;">
      <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" />
    </div>
    <div class="frCell" style="width:80px;">
      <input type="button" name="searchBtn" id="searchBtn" value="Search"/>
    </div>
    <div class="frCell">
      <span id="searchMsg" style="display:none;"></span>
    </div>
  </div>
</div>

CSS

div.formTbl {
	display: table;
	width: 100%;
}
div.frRow {
	display: table-row;
	text-align: left;
}
div.frCell {
	display: table-cell;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
span.info, .success, .warning, .error {
	border: 1px solid;
	margin: 5px;
	padding:5px 10px 5px 40px;
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 3px;
	display: block;
}
span.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('../Images/error.png');
}

JavaScript

$('#searchBtn').on('click', function(){
	$('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){
			    $(this).removeClass("error").dequeue();
			});
});