JSFiddle - React, Tailwind, and code Playground

HTML

<div id="home-body">    
        <p class="titles">Some Words Here</p>
        <div id="home-photo">
            <a id="test" href="#">Click Here To Close</a>
            <img src="{{ STATIC_URL }}img/frontimage.png">
        </div>
        <div id="home-list">
            <ol>
                <li class="flat-text flat-bold">Find</li>
                <li class="flat-text flat-bold">Download</li>
                <li class="flat-text flat-bold">Go</li>
                <li class="flat-text flat-bold">Come back</li>
            </ol>
        </div>
        <div id="home-buttons">
        </div>
        <div id="flat-links">
            <a id="home-tos" href class="flat-text flat-bold">Terms of use</a> - <a id="home-privacy" href class="flat-text flat-bold">Privacy Policy</a> - <a id="home-site" href class="flat-text flat-bold">Sitemap</a>
            <div id="tos-description"><a href="#">Click Me</a></div>
            </div></div>

JavaScript

$(function() {
    $("#tos-description").dialog({
        autoOpen: true,
        width:500,
        height:500,
        modal: true,
        open: function(){
            $(this).find("a").click(function(){
                   $("#home-photo").dialog({
                    autoOpen: true,
                    width:300,
                    height:200,
                    modal: true,
                    open: function(){
                        $(this).find("a").click(function(){
                           $(this).parent().dialog("close"); 
                        });
                    }
                }); 
            });
        }
    });
});