JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<br>
<table class=mytable>
    <th class=vertical bgcolor=#C0C0C0 align=center> <font color=#FF0000 size=2> Test this out</font>
    </th>
 <th class='vertical' bgcolor='#C0C0C0' align='center'> <font color='#568000' size='2'> Test this out</font>
  </th>    
    
</table>
<input type="button" id="transForm" value="Transform">

CSS

/* Styles for rotateTableCellContent plugin*/
  table div.rotated {
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      writing-mode:tb-rl;
      white-space: nowrap;
  }
  thead th {
      vertical-align: top;
  }
  table .vertical {
      white-space: nowrap;
  }

JavaScript

(function ($) {
    $.fn.rotateTableCellContent = function (options) {

        var cssClass = ((options) ? options.className : false) || "vertical";

        var cellsToRotate = $('.' + cssClass, this);

        var betterCells = [];
        cellsToRotate.each(function () {
            console.log(this.querySelector('font').color);
            var col = this.querySelector('font').color;
            var cell = $(this),
                newText = cell.text(),
                height = cell.height(),
                width = cell.width(),
                newDiv = $('<div>', {
                    height: width,
                    width: height
                }),
                newInnerDiv = $('<div>', {
                    text: newText,
                        'class': 'rotated'
                });
            newInnerDiv.css("color", col);
            newInnerDiv.css("background-color");
            newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
            newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
            newDiv.append(newInnerDiv);

            betterCells.push(newDiv);
        });

        cellsToRotate.each(function (i) {
            $(this).html(betterCells[i]);
        });
    };
})(jQuery);



$(document).ready(function () {
    $("#transForm").click(function () {
        $('.mytable').rotateTableCellContent();
    });

});