JSFiddle - React, Tailwind, and code Playground
HTML
<input type="datetime-local" />
<div class="custom-datetime-local">
<span class="day">dd</span>/
<span class="month">mm</span>/
<span class="year">yyyy</span>
<span class="hour">--</span>:
<span class="minute">--</span>
</div>
CSS
.custom-datetime-local{
border:1px solid #999;
}
.custom-datetime-local span{
display:inline-block;
}
.custom-datetime-local span:focus, .custom-datetime-local span.active{
background-color:#B5D5FF;
}
JavaScript
$('.custom-datetime-local span').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
});