JSFiddle - React, Tailwind, and code Playground

by adamovic

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css" rel="Stylesheet" />
    <script  defer  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script  defer  src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script>
  if (typeof whenDocReady === "function") {
    // already declared, do nothing
  } else {
    function whenDocReady(fn) {
      // see if DOM is already available
      if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
      } else {
        document.addEventListener("DOMContentLoaded", fn);
      }
    }
  }
</script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju/dt-1.10.22/datatables.min.css"/>
<script defer src="https://cdn.datatables.net/v/ju/dt-1.10.22/datatables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8084/LivingCost/common/test.css" />

<title>Current Health Care Index by City</title>
</head>

<body>


<div>
    <h1> Current Health Care Index</h1>


      <table id="t2"  class="stripe row-border order-column compact" >
<thead>
	<tr>
	<th><div style="font-size: 80%; vertical-align: middle;">Rank</div></th>
		<th><div style="font-size: 95%;">City</div></th>
		<th><div style="font-size: 90%;">Health Care Index</div></th>
	</tr>
</thead>
<tbody>

 <tr style="width: 100%">
  <td></td>
    <td class="cityOrCountryInIndicesTable"><a href="http://localhost:8084/LivingCost/health-care/in/Caracas" class="discreet_link">Caracas, Venezuela</a></td>
    <td style="text-align: right">38.92</td>
 </tr>
 <tr style="width: 100%">
  <td></td>
    <td class="cityOrCountryInIndicesTable"><a...