JSFiddle - React, Tailwind, and code Playground

by Ganesh_Babu_469

HTML

<div class="panel2" style="border: 1px solid red;">
			<div id="charInfo">
          <span class="close">x</span>       
			<table width="500px" style="border:1px solid #000;border-collapse:collae;font-familyrif;font-size:80%;">
		<!-- 		<caption style="font-size:140%;padding:5px;align:right;">
				                <span class="close">x</span>
				                </caption> -->
				<thead>
					<tr><th scope="col">Zone name</th>
						<th scope="col">Wish Items</th>
						<th scope="col">Received</th>
						<th scope="col">Status</th>
					</tr>
				</thead>
				<tbody>
					<tr></tr>
					<tr>
						<th scopre="row">Heart of Fear</th>
						<td align="center">22</td>
						<td align="center">0</td>
						<td align="center" style="color:Green;"><b>Active</b></td>
					</tr>
					<tr>
						<th scopre="row">Mogu-shan Vaults</th>
						<td align="center">27</td>
						<td align="center">4</td>
						<td align="center" style="color:Green;"><b>Active</b></td>
					</tr>
					<tr>
						<th scopre="row">Throne of Thunder</th>
						<td align="center">45</td>
						<td align="center">0</td>
						<td align="center" style="color:Green;"><b>Active</b></td>
					</tr>
					<tr>
						<th scopre="row">Throne of Thunder (Heroic)</th>
						<td align="center">5</td>
						<td align="center">1</td>
						<td align="center" style="color:Red;"><b>Not locked</b></td>
					</tr>
				</tbody>
			</table>
			</div>
		</div>

CSS

#lockList {width:auto;margin:auto;position: relative;}