JSFiddle - React, Tailwind, and code Playground

by rickjackson

HTML

<table cellpadding="2" width="100%" cellspacing="2">
        <tr>
            <td style="width: 20%;"> 
               <div style="overflow-x:scroll; overflow-y:hidden; height:500px">
                    <div id="objPanel0" class="nailthumb-container square-thumb">
    <img id="imgThumbnailer0" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTCjub9BqGAdCvA2mt8zIfRZVSBhXNrgT4S7YvuxGySBWNi36LG" />
</div><div id="objPanel1" class="nailthumb-container square-thumb">
    <img id="imgThumbnailer1" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTCjub9BqGAdCvA2mt8zIfRZVSBhXNrgT4S7YvuxGySBWNi36LG" />
</div><div id="objPanel2" class="nailthumb-container square-thumb">
    <img id="imgThumbnailer2" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTCjub9BqGAdCvA2mt8zIfRZVSBhXNrgT4S7YvuxGySBWNi36LG" />
</div><div id="objPanel3" class="nailthumb-container square-thumb">
    <img id="imgThumbnailer3" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTCjub9BqGAdCvA2mt8zIfRZVSBhXNrgT4S7YvuxGySBWNi36LG" />
</div><div id="objPanel4" class="nailthumb-container square-thumb">
    <img id="imgThumbnailer4" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTCjub9BqGAdCvA2mt8zIfRZVSBhXNrgT4S7YvuxGySBWNi36LG" />
</div><div id="objPanel5" class="nailthumb-container square-thumb">
    <img id="imgThumbnailer5" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTCjub9BqGAdCvA2mt8zIfRZVSBhXNrgT4S7YvuxGySBWNi36LG" />
</div>
                </div>
            </td>
            <td style="width: 80%;">
                <div id="viewer2" class="viewer" style="border-width:2px;border-style:Inset;">
                    </div>
            </td>
        </tr>
    </table>

CSS

.viewer { width: 1000; height: 500px; border: 1px solid black; position: relative; }
.modalPopup { background-color: #ffffdd; width: 400px; }
#container { height: 600px; overflow: scroll; }

.wrapper { overflow: hidden; }
.square-thumb { width: 150px; height: 150px; }

JavaScript

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://yourjavascript.com/4952631312/jqueryui.js"></script>
<script type="text/javascript" language="javascript" src="http://yourjavascript.com/2232151329/jquery.nailthumb.1.1.min.js"></script>


<script type="text/javascript">
$('.nailthumb-container').nailthumb({ width: 100, height: 100 });
</script>