JSFiddle - React, Tailwind, and code Playground

by Rob Sedgwick

HTML

<table class="border balls" width="100%" cellspacingx="10" cellpaddingx="10">
  <tbody>
    <tr>
      <td class="win">
        <div class="width100pc borderx">
          <div class="pullleft pad6" stylexx="padding: 6px;">
            <img src="//cdn.thefishy.co.uk/blahdocs/images/crumbs.png" class="centerimg" alt="" data-evernote-hover-show="true"> <a href="Blah.pl?">Fishy Forum</a> <strong>›</strong> <a href="Blah.pl?c-gc/">Fishy Boards</a> <strong>›</strong> <a href="Blah.pl?b-dr/">The New Fishy</a>            <strong>›  FGR tickets</strong>
          </div>
          <div class="pullright smalltext nomobile"><strong>Moderators:</strong> <a href="Blah.pl?v-members/a-groups/group-15/" class="usercolors" style="color: blue">Moderator</a></div>
        </div>
      </td>
    </tr>
    <tr>
      <td class="win smalltext">
        <div class="win2 pad6" stylexx="padding: 6px"><strong>Users Browsing Forum</strong></div>
        <div class="pad6" stylexx="padding: 6px"><a href="Blah.pl?v-memberpanel/a-view/u-139917/" rel="nofollow" title="April 23, 2018, 5:11pm">11MARINER11</a>, <a href="Blah.pl?v-memberpanel/a-view/u-3172/" rel="nofollow" title="April 23, 2018, 5:08pm">acko338</a>, <a title="April 23, 2018, 5:17pm"
            class="onlinebots" style="cursor:default;">AdSense</a>, <a href="Blah.pl?v-memberpanel/a-view/u-1274/" rel="nofollow" title="April 23, 2018, 5:20pm">AndyDarloFC</a>, <a href="Blah.pl?v-memberpanel/a-view/u-140023/" rel="nofollow" title="April 23, 2018, 5:06pm">AussieMariner</a>,
          <a href="Blah.pl?v-memberpanel/a-view/u-1136/" rel="nofollow" title="April 23, 2018, 5:17pm">Badger57</a>, <a href="Blah.pl?v-memberpanel/a-view/u-1043/" rel="nofollow" title="April 23, 2018, 5:10pm">Barrattstander</a>, <a href="Blah.pl?v-memberpanel/a-view/u-139797/"
            rel="nofollow" title="April 23, 2018, 5:15pm">bedders78</a>, <a href="Blah.pl?v-memberpanel/a-view/u-123614/" rel="nofollow" title="April 23, 2018, 5:08pm">Black_and_White_Bear</a>,...

CSS

/* Default Theme Layout */
#container {
	margin       : auto;
	padding      : 0;
	margin-top   : 0;
	margin-bottom: 10px;
	background   : #FCFDFF;
	display: table-cell;
}

@media(min-width: 600px) {
#container {
	width        : 100%;
	}
}
body {
	width        : 95%;
	margin          : 10px; 
	}
}

@media(max-width: 600px) {
#container {
	width        : 825px;
	}
body {
	width        : 825px;
	margin          : 0; 
	}
}


#container .surround {
	border: 1px #8D969B solid;
	border-top: 0;
	padding: 1px;
	padding-top: 0;
}

#copyright {
	width : 95%;
	margin: auto;
}

#title {
	float       : left;
	background      : url('/images/top_grad.gif');
	background-color: #FFF;
	font-size       : xx-large;
	font-weight     : bold;
	text-align      : left;
	vertical-align  : middle;
	padding         : 25px;
}

#menu-container {
	float       : left;
}

#content {
	clear: both;
	padding: 10px;
}


/* Global Table Settings */
body, table, td {
	font-family: Arial, Verdana, Helvetica;
	font-size  : medium;
	line-height: 1.3;
	color      : #1D1F22;
}

body {
	background-color: #D8D8D8;
	text-align      : center;
}

body {
    display: table;
    vertical-align: middle;
    margin-left:auto;
    margin-right:auto;
}

td {
	text-align: left;
}

img {
	border: 0;
}

img {
	border: 0;
}

blockquote {
	border     : 1px #4385DB solid;
	border-left: 5px #4385DB solid;
}

blockquote .quoteby {
	padding      : 10px;
	border-bottom: 1px #4385DB dotted;
}

blockquote .quotebody {
	padding: 10px;
}

.catdesc {
	padding    : 4px;
	line-height: 130%;
}

.normaltext {
	font-size      : medium;
	text-decoration: none;
	font-weight    : normal;
}

.indextitle {
	font-size  : x-large;
	font-weight: bold;
	white-space: nowrap;
	margin: 0pt;
}

.indextitle2 {
	font-size  : x-large;
	font-weight: bold;
	margin: 0pt;
}

.subtitle {
	font-size  : medium;
	font-weight: bold;
	white-space: nowrap;
}

.pages {
	font-weight   : normal !important;
	font-size     : small;
	line-height   : 1.5;
	white-space  ...