JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<button id="yeniAileEkle">Open Dialog</button>
<div id="yeniAileDialog" title="YENİ AİLE EKLE" style="display:none;">
    <div class="other-box yellow-box ui-corner-all ui-corner-all">
        <div class="cont ui-corner-all">
            <p>Lütfen bütün alanları eksiksiz doldurunuz.</p>
        </div>
    </div>
    <form action="javascript:;" method="post" name="yeniAile">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">tab 1</a></li>
                <li><a href="#tabs-1">tab 2</a></li>
                <li><a href="#tabs-1">tab 3</a></li>
            </ul>
            <div id="tabs-1"></div>
        </div>            
    </form>
</div>

JavaScript

$('#tabs').tabs();
$('#yeniAileEkle').click(function() {
            $('#yeniAileDialog').dialog('open');
        });

        $("#yeniAileDialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 350,
            width: 600,
            modal: true,
            buttons: {
                'Aileyi Ekle': function() {

                },
                İptal: function() {
                    $(this).dialog('close');
                }
            }
        });