JSFiddle - React, Tailwind, and code Playground

HTML

<span id="default_message_overlay">Default message</span>

<div>    
    <select id="my_select">
        <option value="1">Option 1</option>  
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>

CSS

* {
   font-family: Arial;            
   font-size: 12px;            
}

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

div {
  padding: 20px;   
}

JavaScript

$(document).ready(function() {
    
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);
    
    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);
    
    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
    
});