JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div class="max-h-96 overflow-y-scroll my-6">
  <style>
    
	thead {
	  height: 200px;
	  tr {
		position: relative;
		th:not(:first-child) {
		  
		  height: 200px;
		  padding: 0 !important;
		  position: relative;
		  span {
			display: inline-flex;
			transform: rotate(-90deg);
		  }
		}

		
	  }
	}

	th:not(:first-child)::after {
			position: absolute;
			content: "Test";
			top: 0;
			left: 0;
		}

  </style>
  <table class="table-fixed leading-loose">
    <thead class="text-center sticky top-0">
      <tr>
        <th class="p-3 bg-white w-1/5 sticky left-0"></th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>apply</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>upload</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>preview_close</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>option_select</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>blur</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>expand</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>stop_recording</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>stream</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>undo</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>collapse</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>edit</span>
        </th>
        <th class="p-3 font-normal bg-white border-t border-l">
          <span>download</span>
        </th>
        <th class="p-3...

CSS

thead {
  height: 200px;
  tr {
    position: relative;
    th:not(:first-child) {
      
      height: 200px;
      padding: 0 !important;
      position: relative;
      span {
        display: inline-flex;
        transform: rotate(-90deg);
      }
    }

    
  }
}

th:not(:first-child)::after {
        position: absolute;
        content: "Test";
        top: 0;
        left: 0;
    }