JSFiddle - React, Tailwind, and code Playground

by MathiasaurusRex

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;
    /* padding:3px 7px 2px 7px; */
}

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


.slanted {
    
    /*
     -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    */
    
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    
    
    white-space:nowrap;
    /*
	display:noblock;
    */
}

JavaScript

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