JSFiddle - React, Tailwind, and code Playground

HTML

<span id="plantimefromdd" style="position:relative;" >
    <input id="textin1" name="textin1" type="text" style="width:80px;text-align:center;" value="" />
<ul id="dropdown">
    <li>00:00</li>
    <li>01:00</li>
    <li>02:00</li>
    <li>03:00</li>
    <li>04:00</li>
    <li>05:00</li>
    <li>06:00</li>
    <li>07:00</li>
    <li>08:00</li>
    <li>09:00</li>
    <li>10:00</li>
    <li>11:00</li>
    <li>12:00</li>
    <li>13:00</li>
    <li>14:00</li>
    <li>15:00</li>
    <li>16:00</li>
    <li>17:00</li>
    <li>18:00</li>
    <li>19:00</li>
    <li>20:00</li>
    <li>21:00</li>
    <li>22:00</li>
    <li>23:00</li>
    <li>24:00</li>
</ul>
</span>

CSS

#dropdown {    
 margin:0;
 padding:0;
	position:absolute;
	left:12px;
	display:none;
	border:1px solid #A4A4A4;
    width:100px;
    height:285px;
    overflow:auto;
	background:#f9f9f9;
	text-align:center;
	list-style-type:none;
}
#dropdown ul {
	height:5px;
	background:#f9f9f9;
	list-style-type:none;
}
#dropdown ul li {
	height:5px;
    list-style:none;
}
#dropdown li:hover { 
	background:#ccc; 
	cursor:pointer; 
}

#dropdown .selected { 
	background:#ccc; 
}

JavaScript

$('document').ready(function(){
	$('#textin1').click(function() {
		var pos = $('#textin1').offset();
		pos.top += $('#textin1').width();
		
		$('#dropdown').fadeIn(100);
		return false;
	});

	$('#dropdown li').click(function() {
		$('#textin1').val($(this).text());
		$('#dropdown li').removeClass('selected');
		$(this).addClass('selected');
		$(this).parent().fadeOut(100);
	});
});

//to hide listing when on click anywhere
$(document).click(function(e) {
    var target = e.target;
    if (!$(target).is('#textin1') && !$(target).parents().is('#textin1')) {
        $('#dropdown').fadeOut(100);
    }
});