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"><head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="IE=8" http-equiv="X-UA-Compatible"><title>
    Image Manager
</title>
    <script type="text/javascript" src="jquery_latest.js"></script>
    <link rel="stylesheet" href="main.css" type="text/css">
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            setheight();
        });
</script>
    
    <script language="javascript" type="text/javascript">        
 function showDetails(cid) 
        {
            //var Cid=$('#'+cid);
            if($('#'+cid).is(':hidden'))
            {
                $('#'+cid).slideDown("slow");
                $('#'+cid+' a').html('Less Details');

            }
            else
            {
               $('#'+cid).slideUp("slow");
               $('#'+cid+' a').html('More Details');
            }
        }


        $(document).mousemove(function(e){
           tempX = ( e.pageX );
           tempY = ( e.pageY )- 200;
             $('#imageshow').css({ left :  tempX + "px",
              top : tempY + "px",
              });
    
        });
        function closemodel(mdln)
        {
            $('.'+mdln).css({
                display:'none'
                });
            $('#mask').css({
                display:'none'
            });
            $('#close').css('display', 'none');
            $('#model_heading').html('');
        }
        function showpushmodel(mn,ctle)
        {
 
            $('#mask').css({
                display:'block',
                width:'100%',
                top:'0px',
                left:'0px',
            });
            $('#close').css({
                display:'block',
                });
            $('.'+mn).css({
                display: 'block'
                });
               ...

CSS

@charset "utf-8";
/* CSS Document */

body
{
    margin:0 10px; 
    font-size:13px;
}
.IMbutton
{
    color:#3C80B7;
    font-size:13px;
    float:right;
    position:relative;
    text-decoration: underline;
    margin:0 0;
    background:none;
    height:auto;
    clear:none;
}
.modelbox_pushlive_txt
{
    margin:5px 4px;
    vertical-align:middle;
    float:left;
    clear:both;
    color:#ffffff;
    background:none;
    text-align:left;
}
.modelbox_pushlive_txt a, .modelbox_pushlive_txt a:hover, .modelbox_pushlive_txt a:active
{
    clear: none;
    color: #3C80B7;
    float: left;
    font-size: 13px;
    height: auto;
    margin: 0;
    position: relative;
    text-decoration: underline;
}

.viewall_sort_img
{
    border:1px solid #9B9B9B;
    margin:8px 0 20px 0;
}
.sorting_img
{
    width:60px;
    height:60px;
    margin:0 10px;
    border:1px solid #dadada;
    float:left;
    position:relative;
}

.wrapper
{
    width:100%;
    
    font-family:Arial, Helvetica, sans-serif;
}
a
{
    font-family:Arial, Helvetica, sans-serif;
}
.header
{
    height:60px;
    width:100%;
    margin-bottom:5px;
}
.logo
{
    width:359px;
    height:58px;
    float:left;
    position:relative;
}
.logo img
{
    border:0;
}
.userlogin
{
    float:right;
    display:block;
    height:28px;
    float:right;
    position:relative;
    font-family:"Segoe UI",Arial,sans-serif;
    margin-top:30px;
}
#loggedinas
{
    font-size:12px;
    font-weight:bold;
    margin-right:3px;
}
#loggedinusername
{
    font-size:12px;
    margin-left:5px;
}
#signblock a, a:hover, a:active
{
    color:#3C80B7;
    font-size:12px;
    margin:0 3px;
    float:none;
}
.topnav, .RadMenu
{
    width:100%;    
    background-color:#000;
}
.topnav ul
{
    padding-left:0px;
    height:32px;
    margin:0 0;
    list-style-type:none;
}
.topnav ul li
{
    float:left;
    position:relative;
    z-index:300;
}
.topnav ul li.first
{
    margin-left:2px;
}
.topnav ul li a /* .RadMenu_Default .rmHorizontal...