JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
	<div id="mainDiv">
		<p class="head">Time Calculation</p>
		<div>
			<b>PunchIn</b>
			<input type="text" id="intime" class="time" placeholder="09:00:00"/><p class="error">PunchTime is not valid</p>
		</div><br/>
		<div>
			<b>OutTime</b>
			<input type="text" id="brktime" class="time" placeholder="06:00:00"/><p class="error1">OutTime is not valid</p>
		</div><br/>
		<div class="button">
			<button id="btn" class="ui-state-default ui-corner-all">Enter</button>
		</div>
	</div>
	<div id="secondDiv">
		<div id="dialog" title="GetOut">
			<b>Your time will end at:<b>
			<input type="text" Readonly="readonly" value="" id="result"/>
		</div>
	</div>
</div>

CSS

#main
{
	width:100%;
	height:500px;
	border:1px solid black;
}
#secondDiv
{
	width:50%;
	margin:30px auto;
}
#mainDiv
{
	width:50%;
	height:50%;
	margin:30px auto;
	font-size:18px;
}
	#mainDiv div{
    display:inline-block;
    padding:0 6px 8px 0;
    vertical-align:top;
	margin-left:50px;
}
input{
 vertical-align:top;
}
#mainDiv b{
    display:inline-block;
    width:100px; 
}
span {display:none;}
.error {display:none;color:red;}
.error1 {display:none;color:red;}
#btn
{	
	 float: none;
    margin-left: 130px;
}
.time{   
	background: white;
    border: 1px solid #DDD;
    border-radius: 5px;
    box-shadow: 0 0 5px #DDD inset;
    color: #666;
    padding: 5px 10px;
    width: 165px;
    outline: none;
	}
	.head
	{
		text-align:center;
	}
	.ui-dialog .ui-dialog-titlebar {
    padding: 0.8em 1em;
    position: relative;
}

JavaScript

$(document).ready(function() {
	$(function() {
		$("#intime").focus();
		var availableTags = [
            "09:00:00",
            "09:15:00",
            "09:30:00",
            "09:45:00",
            "10:00:00",
            "10:15:00",
            "10:30:00",
            "10:45:00",
            "11:00:00",
            "11:15:00",
            "11:30:00",
            "11:45:00",
            "12:00:00",
            "12:15:00",
            "12:30:00",
            "12:45:00",
            "01:00:00",
            "01:15:00",
            "01:30:00",
            "01:45:00",
            "02:00:00",
            "02:15:00",
    ];
	$( "#intime" ).autocomplete({
      source: availableTags
    });
	$( "#brktime" ).autocomplete({
      source: availableTags
    });
	});	
	$(function() {
	$("#intime").focusout(function() {
		var intime=$('#intime').val();
		var re=re = /^\d{1,2}:\d{1,2}:\d{1,2}([ap]m)?$/;
		if(intime != '' && !intime.match(re)) {
			$('.error').css('display','inline').fadeOut(5000);
			$("#intime").focus();
		}
	});
	$("#brktime").focusout(function() {
		var intime=$('#brktime').val();
		var re=re = /^\d{1,2}:\d{2}:\d{1,2}([ap]m)?$/;
		if(intime != '' && !intime.match(re)) {
			$('.error1').css('display','inline').fadeOut(5000);
			$("#brktime").focus();
		}
	});
	$( "#dialog" ).dialog({
		autoOpen: false,
		show: {
        effect: "blind",
        duration: 1000
		},
		hide: {
        effect: "explode",
        duration: 1000
		}
		});
 
		$( "#btn" ).click(function() {
		$( "#dialog" ).dialog( "open" );
		var intime=$('#intime').val();
		var out=$('#brktime').val();
		var constant='08:00:00';
		alert(intime);
		alert(out);
		alert(constant);
		
	});
	});
	});