JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div id="documents" class="hideimages" style="background-color: white; overflow: x;"> 
                    <div id="ui_list_ui_widget_9" style="padding-bottom: 17px!ie7;" class="ui_list_horizontal"><table cellspacing="0" cellpadding="0"><tr><td><div id="ui_selectable_document_562" class="ui_selectable" style=""> 
    <div class="ui_selectable_enabled" style="white-space: nowrap; ">                        <div style="text-align: center;"> 
                                                        <img style="border: solid 1px black; margin-left: auto; margin-right: auto;" title="Page #562" src="/index.php?pxc=112033&amp;current=w&amp;pxd=.p.w.image&amp;id=4047&amp;thumb=1&amp;account=1" width="100" height="75"/> 
                        </div> 
                        <div style="text-align: center;">Webformmm</div> 
                    </div> 
</div></td></tr></table></div> 
            
    </div>

CSS

.ui_list_horizontal
{
    overflow-x:         auto;
    overflow-y:         hidden;
}


.ui_list_horizontal table
{
        padding:            2px 2px 2px 2px;
        margin:             1px 1px 1px 1px;
        height:             100%;
}


.ui_list_horizontal table td
{
    padding-right:      3px;
    padding-left:       3px;
}


{
    border-collapse:    collapse;
    padding:            0px;
}

.ui_selectable_enabled
{
    min-height:         20px;
    padding:            2px 4px 1px 4px;
    border:             1px solid transparent;
}

.ui_selectable_enabled:hover
{
    background-repeat:  repeat-x;
    background-color:   #d2ecf9;
    background-image:   url(../images/selectable_hover.gif);
    border:             1px solid #B3E4F9;
    cursor:             pointer;
}

.ui_selectable_disabled
{
    -moz-opacity:       .50;
    opacity:            .50;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:             alpha(opacity=50);    
    padding:            2px 4px 1px 4px;
    border:             1px solid transparent;
}

.ui_selectable_disabled table /* IE FIX */
{
    -moz-opacity:       .50;
    opacity:            .50;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:             alpha(opacity=50);
}

.ui_selectable_selected
{
    min-height:         20px;
    padding:            2px 4px 1px 4px;
    border:             1px solid #B3E4F9;
    background-image:   url(../images/selectable_pressed.gif);
    background-repeat:  repeat-x;
    background-color:   #b7d8ef;
}

.ui_selectable_selected:hover
{
    border:             1px solid #B3E4F9;
    background-image:   url(../images/selectable_pressed.gif);
    background-repeat:  repeat-x;
    background-color:   #b7d8ef;
    cursor:             pointer;
}