JSFiddle - React, Tailwind, and code Playground

by roomyrooms

HTML

<div class="hotkey_editor">
   <table class="hotkey_table" cellspacing="0">
      <tbody>
         <tr class="hotkey_header_row">
            <th class="hotkey_header">Hotkey Function</th>
            <th class="hotkey_header">Assigned Key</th>
         </tr>
      </tbody>
      <tbody class="hotkey_indicator_row">
         <tr>
            <td class="hotkey_indicator_entry" colspan="2">&gt; Spell Slots</td>
         </tr>
      </tbody>
      <tbody class="hotkey_indicator_content">
         <tr class="hotkey_row">
            <td class="hotkey_func_entry">Cast Slot 1</td>
            <td class="hotkey_key_entry" id="triggerHotbarButtonC_1"><span>1</span> <button class="hotkey_change_button" type="button">Change Key</button></td>
         </tr>
         <tr class="hotkey_row">
            <td class="hotkey_func_entry">Cast Slot 2</td>
            <td class="hotkey_key_entry" id="triggerHotbarButtonC_2"><span>2</span> <button class="hotkey_change_button" type="button">Change Key</button></td>
         </tr>
         <tr class="hotkey_row">
            <td class="hotkey_func_entry">Cast Slot 3</td>
            <td class="hotkey_key_entry" id="triggerHotbarButtonC_3"><span>3</span> <button class="hotkey_change_button" type="button">Change Key</button></td>
         </tr>
         <tr class="hotkey_row">
            <td class="hotkey_func_entry">Cast Slot 4</td>
            <td class="hotkey_key_entry" id="triggerHotbarButtonC_4"><span>4</span> <button class="hotkey_change_button" type="button">Change Key</button></td>
         </tr>
         <tr class="hotkey_row">
            <td class="hotkey_func_entry">Cast Slot 5</td>
            <td class="hotkey_key_entry" id="triggerHotbarButtonC_5"><span>5</span> <button class="hotkey_change_button" type="button">Change Key</button></td>
         </tr>
         <tr class="hotkey_row">
            <td class="hotkey_func_entry">Cast Slot 6</td>
            <td class="hotkey_key_entry"...

CSS

.hotkey_editor {
					padding: 0px;
					background: none;
					bottom: 0%;
					margin-bottom: 0px;
					width: 95%;
					height: 250px;
					overflow: auto;
					font-family: Constantia;
					font-size: 15px;
					text-align: center;
					overflow-x: hidden;
					overflow-y: scroll;
				}

				.hotkey_table {
					text-align: left;
					width: 100%;
				}

				.hotkey_header_row {
					color: #CDCED0;
				}

				.hotkey_header {
					position: sticky;
					top: 0;
					background-color: #333;
					padding-left: 4px;
					padding-right: 0px;
					margin-top: 2px;
					border: 1px solid #555;
					border-radius: 5px;
					width: 50%;
					font-size: 15px;
					text-align: left;
					text-decoration: underline;
				}

				.hotkey_indicator_row {
					background-color: #6d6f7f;
					color: #CDCED0;
					cursor: pointer;
				}
				.active, .hotkey_indicator_row:hover {
					background-color: #797A87;
				}

				.hotkey_indicator_content {
					overflow: hidden;
					width: 100%;
				}

				.hotkey_indicator_entry {
					padding: 3px 0px 3px 5px;
				}

				.hotkey_row {
					background-color: #232323;
					color: #CDCED0;
				}

				.hotkey_func_entry {
					padding: 3px 0px 3px 30px;
					width: 120px;
				}

				.hotkey_change_button {
					float: right;
					color: #222222;
				}

				.hotkey_key_entry {
					padding: 3px 0px 3px 10px;
					width: 110px;
				}

				#hotkey_confirm {
					position: absolute;
					top: 83%;
					left: 91%;
					border: 0;
					width: 32px;
					height: 32px;
					background: transparent;
					pointer-events: auto;
				}