JSFiddle - React, Tailwind, and code Playground

HTML

<select>
    <option value="">Empty Option</option>
    <option value="1">Option 1</option>
    <option value="1">Option 2</option>
    <option value="1">Option 3</option>
    <option value="1">Option 4</option>
</select>

CSS

select {
    width: 150px;
    font-size: 12px;
    padding: 5px;
    height: 30px;
}

select.empty {
	color: #959595;
	font-family: Verdana;
}

.not-first {
	color: #282525;
	font-family: Arial;
}

.first {
	color: #BDBDBD;
	font-family: 'Times New Roman';
}

JavaScript

$('option')
    .first().addClass('first')
    .siblings().addClass('not-first');

$('select').change(function(){
    $(this).attr('class', $('option:selected', this).attr('class'));
}).change();