JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="topBar"></div>
        <div id="mainWrapper">
            <div id="bannerBar"><a href="/"><img alt="Okmulgee Banner Image" src="/Images/City_Images/banner.jpg" /></a></div>
            <img id="colorFade" alt="Green Fading Background Image" src="/Images/Background_Images/GreenFadeBackground.jpg" />
            <div id="btnWrapper">
                    <!--Buttons For Visitor Type Drop Down Links *START*-->
                <div id="residentsDDL" class="DDL visType residentsDD EditDD"><img src="/Images/Background_Images/BurgundyButton.jpg" alt="Btn Img" /><div class="btnText">Residents</div></div><!--
             --><div id="businessesDDL" class="DDL visType businessesDD EditDD"><img src="/Images/Background_Images/BurgundyButton.jpg" alt="Btn Img" /><div class="btnText">Businesses</div></div><!--
             --><div id="visitorsDDL" class="DDL visType visitorsDD EditDD"><img src="/Images/Background_Images/BurgundyButton.jpg" alt="Btn Img" /><div class="btnText">Visitors</div></div><!--
                    <!--Buttons For Visitor Type Drop Down Links *END*--><!--
                    <!--Buttons For Category Type Drop Down Links *START*--><!--
             --><div id="cityDDL" class="DDL groupType cityDD EditDD"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">City of Okmulgee</div></div><!--
             --><div id="mainStreetDDL" class="DDL groupType mainStreetDD EditDD"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">Main Street</div></div><!--
             --><div id="organizationsDDL" class="DDL groupType organizationsDD EditDD"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">Organizations</div></div><!--
             --><div id="oadcDDL" class="DDL groupType oadcDD EditDD"><img src="/Images/Background_Images/GreyButton.jpg" alt="Btn Img" /><div class="btnText">OADC</div></div>
                    <!--Buttons For...

CSS

body
{
    width: 100%;
    margin: auto;
}

#topBar
{
    width: 100%;
    height: 8px;
    background-color: #57bf2a;
    margin: auto;
}

div#bannerBar
{
    height: 150px;
    width: 100%;
    margin: auto;
    height: 150px;
    background-color: #fff;
}

div#bannerBar a img
{
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

div#mainWrapper
{
    position: relative;
    width: 75%;
    width: 852px;
    margin: auto;
    margin-top: 50px;
    background-color: #fff;
    margin-bottom: 30px;
    border: 1px solid #000;
    -moz-border-radius: 5px 5px 5px 5px;
    -ms-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}

p.footer
{
    text-align: center;
    padding-top: 5px;
    font-size: .8em;
}

div.footer
{
    text-align: center;
    font-size: .8em;
    position: relative;
    top: -12px;
}

img#colorFade
{
    height: 35px;
    width: 100%;
}

.DDL
{
    position: relative;
    width: 120px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.3em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 50;
}

.DDL img
{
    position: absolute;
    vertical-align: bottom;
    margin: 0px;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
}

.DDL.visType
{
    background-color: #bb9191;
    border-right: 2px solid #ba8c8c;
    color: #1a5c17;
}

.DDL.groupType
{
    background-color: #e7e7e7;
    border-right: 2px solid #989898;
    color: #0b3773;
}

.DDL .btnText
{
    position: relative;
    z-index: 2;
    text-align:...

JavaScript

jQuery(function ($) {
    $("#residentsDDL").off("click");
    $("#businessesDDL").off("click");
    $("#visitorsDDL").off("click");
    $("#cityDDL").off("click");
    $("#mainStreetDDL").off("click");
    $("#organizationsDDL").off("click");
    $("#oadcDDL").off("click");

    //DRAG, DROP, AND SORTABLE CODE *START*//
    $("#sortable").sortable({
        revert: true,
        receive: function (event, ui) {

        },
        change: function (event, ui) {
            //Place code that triggers on the sortable list being changed here.
            //Note, DO NOT allow alerts in this function. It breaks the dragging/dropping fluidity.
        }
    }).droppable({});

    $("#draggable, #draggable2").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $("ul, li").disableSelection();
    //DRAG, DROP, AND SORTABLE CODE *END*//
});