JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css">
<html>
    <body>
        <div id="click-me">Click me</div>
        <div id="pairing-proposal-dialog">
            <div id="pairing-proposal-command-section-wrapper">
                <div id="pairing-proposal-commands">[Asetukset] [Poista ehdotukset]</div>
                <div id="pairing-proposal-search">
                    <span>Hae eläin, Id</span><input type="text"/>
                </div>
                <div id="pairing-proposal-help">
                    <span>Help</span>
                </div>
            </div>
            <div id="pairing-proposal-animals-wrapper">
                <div id="pairing-proposal-males">
                    <ul>
                        <li>Male 1</li>
                        <li>Male 2</li>
                        <li>Male 3</li>
                        <li>Male 4</li>                        
                    </ul>
                </div>
                <div id="pairing-proposal-females">
                    <ul>
                        <li>Female 1</li>
                        <li>Female 2</li>
                        <li>Female 3</li>
                        <li>Female 4</li>                        
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#click-me
{
    padding: 5px;
    border: 1px solid black;
}

#pairing-proposal-dialog
{
    display: none;
}

#pairing-proposal-command-section-wrapper
{
    width: 100%;
    height: 40px;
}

#pairing-proposal-search
{
    float: left;
}

#pairing-proposal-help
{
    float: right;
}

#pairing-proposal-commands
{
    margin-right: 30px;
    float: left;
}

#pairing-proposal-animals-wrapper
{
    width: 100%;
}

#pairing-proposal-males
{
    height: 25%;
}

#pairing-proposal-females
{
    height: 75%;
}

JavaScript

$('#click-me').click(function () {
    $('#pairing-proposal-dialog').dialog({
        title: "Paritussuunnitelma",
        width: 800,
        height: 800
    });
});