JSFiddle - React, Tailwind, and code Playground

by floyd_may

HTML

<link rel="stylesheet" href="https://gis.topographic.com/LandScapeQA/Styles/jquery-ui-1.8.16.dojo-soria.css">
<div class='ui-helper-reset ui-widget header'>
    <span class='ui-state-disabled'><span class='numbers ui-button ui-state-default'>1</span>Select File
    
    <span class='numbers ui-button ui-state-default'>2</span>Verify Geography
    
        <span class='numbers ui-button ui-state-default'>3</span>Choose Data</span>
    
    <span class='numbers ui-button ui-state-default'>4</span>Refine Display
    
    <span class='ui-state-disabled'><span class='numbers ui-button ui-state-default'>5</span>Done!
    </span>
    
</div>

<div class='ui-widget'>
    <br /><br />
    <h3>Choose Display Symbol for Each Item</h3>
    
    <table cellspacing='0'>
        <thead>
            <tr>
                <th>Symbol</th>
                <th>Depth (ft)</th>
                <th>Awesomeness</th>
                <th>Age (months)</th>
            </tr>
        </thead>
        
        <tr>
            <td><span class='ui-button ui-state-default ui-button-text-icon-secondary'><span class='ui-button-text'>&nbsp;&nbsp;&nbsp;&nbsp;Red Flag</span><span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span></span></td>
            <td>300</td>
            <td>Meh...</td>
            <td>34</td>
        </tr>
        
        <tr>
            <td><span class='ui-button ui-state-default ui-button-text-icon-secondary'><span class='ui-button-text'>&nbsp;&nbsp;&nbsp;&nbsp;Red Flag</span><span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span></span></td>
            <td>223</td>
            <td>Woohoo!</td>
            <td>11</td>
        </tr>
        
        <tr>
            <td><span class='ui-button ui-state-default ui-button-text-icon-secondary'><span class='ui-button-text'>&nbsp;&nbsp;&nbsp;&nbsp;Red Flag</span><span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span></span></td>
            <td>1200</td>
           ...

CSS

.header
{
    font-size: 14px;
}

span.ui-button.ui-state-default.numbers
{
    border-radius: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 10px;
}

.browse
{
    font-size: 11px;
}

th,td
{
    text-align: center;
    border: 1px solid #999;
    padding: 5px;
}
}