JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<title>JQM ListTable</title>
<style>
                table {border: 1px solid #ccc; width: 100%; border-spacing: 0px; }
                .ui-th-c, .ui-td-c {padding: 0.7em 15px; border-top: 1px solid #ccc;}
                .ui-th-c {xbackground-color: #003772;}
                .ui-td-c {background-color: #eee;}
</style>
</head>
 
<body>
<div data-role="page" data-theme="b" id="mobile-page">
                <div data-role="header" data-backbtn="false" data-position="inline" id="header" data-theme="b">
                <h1>Table List demo</h1>
    </div>
   
    <div data-role="content">
                <table data-role="listtable">
                <thead>
                <tr>
                                <th>Make</th>
                    <th>Model</th>
                    <th>Age</th>
                    <th style="text-align: right; width: 20px;"></th>
                </tr>
            </thead>
            <tbody>
                <tr href="http://www.ferrari.com">
                                <td>Ferrari</td>
                    <td>Testarossa</td>
                    <td style="text-align: center">30</td>
                    <td style="text-align: right; width: 20px;"><div class="ui-icon ui-icon-arrow-r ui-icon-shadow"/></td>
                </tr>
                <tr href="http://www.lotusgroup.com">
                                <td>Lotus</td>
                    <td>Exige</td>
                    <td style="text-align: center">10</td>
                    <td style="text-align: right; width: 20px;"><div class="ui-icon ui-icon-arrow-r ui-icon-shadow"/></td>
                </tr>
                <tr...