JSFiddle - React, Tailwind, and code Playground

HTML

<table class="grades">
                <tr>
					<th>
						
					</th>

                    <th class="slanted">
                        <div >
							This is a heading
                        </div>
                    </th>
					<th class="slanted">
						<div >
							Another heading
						</div>
                        
                    </th>
                    <th class="slanted">
                        <div >
							This is a large heading in length
						</div>
                    </th>
                </tr>
                <tr>
					<td>
                        <p><input type="text" id="datepicker" /></p>
					</td>

                    <td>
                        <select id="1-1" class="styled-select" >
    						<option class="colorRed" value="#FF0000">1</option>
							<option class="colorGreen" value="#00FF00">2</option>
							<option class="colorBlue" value="#0000FF">3</option>
							<option class="colorYellow" value="#FFFF00">4</option>
						</select>
                    </td>
					<td>
                        <select id="1-2" class="styled-select" >
    						<option class="colorRed" value="#FF0000">1</option>
							<option class="colorGreen" value="#00FF00">2</option>
							<option class="colorBlue" value="#0000FF">3</option>
							<option class="colorYellow" value="#FFFF00">4</option>
						</select>
                    </td>
                    <td>
                        <select id="1-3" class="styled-select" >
    						<option class="colorRed" value="#FF0000">1</option>
							<option class="colorGreen" value="#00FF00">2</option>
							<option class="colorBlue" value="#0000FF">3</option>
							<option class="colorYellow" value="#FFFF00">4</option>
						</select>
                    </td>
                </tr>
            </table>

CSS

.grades td, th  {
    font-size:1em;
    border:1px solid #98bf21;
}

th {
	border:1;	
    width:40px;
    height:150px;
}

.slanted {
    text-align:left;
    position:relative;   
    white-space:nowrap;
}

.slanted div {
    width:12em;
    position:absolute;
    top:4em;
    left:-1em;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

JavaScript

$('select').change( function () {
    //alert($('#dropdownTest').val());
   // alert($(this));
    $( this ).css('background-color',$(this).val() );
    
    $( this ).css('color',$(this).val() );
});