JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <link href="neo.css" rel="stylesheet" type="text/css" />
    </head>
    <table style='clear: both;' >
        <tr class='headrow' style="white-space: no-wrap;">
            <td class='vertcrush' style="white-space: no-wrap; "  >
                <table width="100%">
                    <tr>
                        <td style="background-color: #999; min-width: 45px; vertical-align: top">
                            <span class='tooltip'>
                                <a href='about:blank'>
                                    <img src='icon_filter.png'>
                                        Filter
                                </a>
                                <span class='tooltip_actual_quickfilter_left'>
                                    <table>
                                        <tr>
                                            <td>
                                                Portfolio:
                                                <br/>
                                                <select id="user_query_filter_dm_portfolio" name="user_query_filter_dm_portfolio" onchange='this.form.submit()'>
                                                    <option value="" selected="selected">
                                                        A Very Long Name To Force Big Tooltip
                                                    </option>
                                                    <option value="!null">
                                                        (none)
                                                    </option>
                                                    <option value="!null">
                                                        Option
                                                    </option>
                   ...

CSS

/* Generated by F12 developer tools. This might not be an accurate representation of the original source file */
HTML {
    BACKGROUND: #ffffff
}
.neo_banner {
    PADDING-BOTTOM: 0px; LINE-HEIGHT: 1; MARGIN: 0px; PADDING-LEFT: 0px; BORDER-SPACING: 0; PADDING-RIGHT: 0px; BORDER-COLLAPSE: collapse; COLOR: #ddd; FONT-SIZE: 8ex; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px
}
.neo_banner A {
    COLOR: inherit
}
.neo_banner TR {
    BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; VERTICAL-ALIGN: baseline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; PADDING-TOP: 0px
}
.neo_banner TD {
    BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; VERTICAL-ALIGN: baseline; BORDER-TOP: medium none; BORDER-RIGHT: medium none; PADDING-TOP: 0px
}
.neo_banner IMG {
    BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; VERTICAL-ALIGN: bottom; BORDER-TOP: medium none; BORDER-RIGHT: medium none; PADDING-TOP: 0px
}
.vertcrush {
    LINE-HEIGHT: 1.25
}
BODY {
    TEXT-ALIGN: left; LINE-HEIGHT: 1.5; MARGIN: 5%; WIDTH: 90%; FONT-FAMILY: Arial, sans-serif !important; COLOR: #000000; FONT-SIZE: 85%
}
H1 {
    TEXT-TRANSFORM: uppercase; COLOR: #000080; FONT-SIZE: 2em; FONT-WEIGHT: normal
}
IMG {
    BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
A {
    MARGIN: 2px; COLOR: #04a; TEXT-DECORATION: none
}
.minideep {
    BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; COLOR: #000; BORDER-RIGHT-STYLE: none; FONT-SIZE: 76%
}
.pairlink {
    COLOR: #aaa; FONT-SIZE: 76%; FONT-WEIGHT: normal
}
.pairlink .heading {
    MARGIN-TOP: 1ex; FONT-WEIGHT: bold
}
.pairlink A {
    BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; COLOR: #aaa; BORDER-RIGHT-STYLE: none
}
A:hover {
    COLOR:...