JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Modal form</title>
</head>
<body>

<div class="demo">

<div id="form">
    <div id="tabs" class="tabs-bottom">
        <ul>
            <li><a href="#tab-0" class="comment">Add comment</a></li>
            <li><a href="#tab-1" class="files">Files</a></li>
            <li><a href="#tab-2" class="email">Email</a></li>
            <li><a href="#tab-3" class="event">Event</a></li>
            <li><a href="#tab-4" class="map">Map</a></li>
        </ul>
        <div id="tab-0">
            <form>
                <textarea id="comment" rows="10" cols="10">Add your comment...</textarea>
            </form>
        </div>
        <div id="tab-1">
            Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
        </div>
        <div id="tab-2">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
        <div id="tab-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
        <div id="tab-4">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>
</div>


<div id="users-contain" class="ui-widget">
    <h1>Map</h1>
</div>
<button id="user-form">Open</button>
<div class="empty_box"> My Invite box....</div>
</div><!-- End demo -->

</body>
</html>

CSS

textarea { width: 100%; padding: 10px; border: none; }
        #comment { 
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box;    /* Firefox, other Gecko */
            box-sizing: border-box;         /* IE 8+ */
        }
        .ui-widget-content {
            border: none /*{borderColorContent}*/;
        }
        #tabs { height: 310px; } 
        .tabs-bottom { position: relative; } 
        .tabs-bottom .ui-tabs-panel { height: 300px; overflow: auto; } 
        .tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } 
        .tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
        .ui-tabs-selected { margin-top: -3px !important; }

        .ui-effects-transfer { border: 0.1em dashed black; }

JavaScript

$(function() {
        var mainButtons = [
            {text: "Invite"
            , 'class': 'invite-button'
            , click: function() {
                // get list of members
                alert('Invite was clicked...');
                }
            } // end Invite button
            , {text: "Options"
            , 'class': 'options-button'
            , click: function() { 
                alert('Options...'); 
                }
            } // end Options button
        ] // end mainButtons
        , commentButtons = [
            {text: "Clear"
            , 'class': 'clear-button'
            , click: function() { 
                $('#comment').val('').focus().select();
                }
            } // end Clear button
            , {text: "Post comment"
            , 'class': 'post-comment-button'
            , click: function() { 
                alert('send comment...');
            }
            } // end Post comment
        ] // end commentButtons
        
        $( "#form" ).dialog({
            autoOpen: false
            , height: 465
            , width: 700
            , modal: true
            , position: ['center', 35]
            , buttons: mainButtons
        });    
        $( "#user-form" )
            .button()
            .click(function() {
                $(this).effect("transfer",{ to: $("#form") }, 1500);
                $( "#form" ).dialog( "open" );
                $( ".invite-button" ).button({ icons: {primary:'ui-icon-person',secondary:'ui-icon-triangle-1-s'} });
                $( ".options-button" ).button({ icons: {primary:'ui-icon-gear'} });
            });

        // Add comment...
        $("#comment, .comment").click(function(){
            $('#comment').focus().select();
            $("#form").dialog({buttons: commentButtons});
            $( ".post-comment-button" ).button({ icons: {primary:'ui-icon-comment'} });
            $( ".clear-button" ).button({ icons: {primary:'ui-icon-refresh'} });
        });...