JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gist.github.com/anonymous/7eae9ae5ed977bcf943c.js"></script>
<script src="https://gist.github.com/anonymous/624a894d0048a61eaecc.js"></script>
<input type="button" class="edit green btn" id="buttonCreateLayer" onclick="InvokeCreateLayerOption();" value="Create New Layer" style="float:right;"/>  
<br/>
    <br/>

<div id="CreateLayerOption" title="Create Layer" style="overflow: hidden;">

    <asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" ID="upCreateLayerOptions">
        <ContentTemplate>

           <div style="float:right">
            </div>
            <br />

            <table width="100%">
                <tr>
                    <td width="100px">
                        <div id="createOne" radiobuttongroup="CreateLayer" rbItemSelected="true" tag="New Layer"></div>
                        <div class="RadioButtonNewLayerText">
                            New Layer
                        </div>

                    </td>
                    <td width="100px">
                        <div id="createTwo" radiobuttongroup="CreateLayer" rbItemSelected="false" tag="Import Layer"></div>
                        <div class="RadioButtonNewLayerText">
                            Import Layer
                        </div>
                    </td>
                    <td width="100px">
                        <div id="createThree" radiobuttongroup="CreateLayer" rbItemSelected="false" tag="External Data"></div>
                        <div class="RadioButtonNewLayerText">
                           External Data
                        </div>
                    </td>
                </tr>

            </table>

            <br />
            <br />
            <div style="float:right">
                <input id="btnNextClient" value="Next" class="edit green btn" onclick="btnNextCreateLayerClient_Click();" style="width:70px;"/>
            </div>
        </ContentTemplate>
        <Triggers>
           ...

CSS

#buttonShareMap:enabled {
float: right;
}
div[radiobuttongroup="CreateLayer"][tag="New Layer"][rbItemSelected="false"]{background-image: url("/images/create.png");width: 64px;height: 64px;top: 0px;left: 0px;margin-left:auto;margin-right:auto;} 
div[radiobuttongroup="CreateLayer"][tag="New Layer"][rbItemSelected="false"]{background-image: url("/images/create.png");width: 64px;height: 64px;top: 0px;left: 0px;margin-left:auto;margin-right:auto;}
div[radiobuttongroup="CreateLayer"][tag="New Layer"][rbItemSelected="false"]{background-image: url("/images/create.png");width: 64px;height: 64px;top: 0px;left: 0px;margin-left:auto;margin-right:auto;}
div[radiobuttongroup="CreateLayer"][tag="New Layer"][rbItemSelected="true"]{background-image: url("/images/create_sel.png");width: 64px;height: 64px;top: 0px;left: 0px;margin-left:auto;margin-right:auto;}
div[radiobuttongroup="CreateLayer"][tag="Import Layer"][rbItemSelected="false"]{background-image: url("/images/import.png");width: 64px;height: 64px;top: 0px;left: 0px;margin-left:auto;margin-right:auto;}
div[radiobuttongroup="CreateLayer"][tag="Import Layer"][rbItemSelected="true"]{background-image: url("/images/import_sel.png");width: 64px;height: 64px;top: 0px; left: 0px;margin-left:auto;margin-right:auto;}
div[radiobuttongroup="CreateLayer"][tag="External Data"][rbItemSelected="false"]{background-image: url("/images/DBConnect.png");width: 64px;height: 64px;top: 0px;left: 0px;margin-left:auto;margin-right:auto;}
div[radiobuttongroup="CreateLayer"][tag="External Data"][rbItemSelected="true"]{background-image: url("/images/DBConnect_sel.png");width: 64px;height: 64px;top: 0px;left: 0px;margin-left:auto;margin-right:auto;}

#buttonDeleteMap:enabled {
float: right;
}
.RadioButtonNewLayerText{font-size:small;text-align:center;}
#ImportLayer{font-size:small;}
input[MapTools="true"][type="checkbox"][checked="checked"]{display: none;}
input[MapTools="true"][type="checkbox"]{display:...

JavaScript

function DivClicked1() {
        //alert("welcome to the show");
        document.getElementById("createOne").blur();
        document.getElementById("createTwo").blur();
        document.getElementById("createThree").focus();
    }

  function BindCreateLayerOptionClick(){
            $('div[radiobuttongroup="CreateLayer"]').click(function () {

                $('div[radiobuttongroup="CreateLayer"]').each(function () {
                    $(this).attr("rbItemSelected", "false");
                });

                $(this).attr("rbItemSelected", "true");
            });           
        }

function InvokeCreateLayerOption() {
            CloseCreateLayerOption();
            createLayerOptionsDlg.dialog("open");
        }

function CloseCreateLayerOption(){
            if(createLayerOptionsDlg.closest('.ui-dialog').is(':visible')==true)
                createLayerOptionsDlg.dialog("close");
        }