JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Main Page -->
<p><a href="#" id="clickGold">Gold</a></p>
<p><a href="#" id="clickSilver">Silver</a></p>

<!-- First Modal Window -->
<div id="first-dialog-message" title="Color Box">
    <p>Opened
        <div id="holder"></div>
    </p>
    <p>Open <a href="#" id="clickForSecondBox">prize</a>
    </p>
</div>

<!-- Second NonModal Window -->
<div id="second-dialog-message" title="Prize Box">
    <p>You won the prize</p>
</div>

CSS

body {
    font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}
.ui-dialog-osx {
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    border-width: 0 8px 8px 8px;
}

JavaScript

$("#first-dialog-message").dialog({
    autoOpen: false,
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx'
});

$("#second-dialog-message").dialog({
    autoOpen: false,
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx'
});

$("#clickGold").on("click", function(e) {
    e.preventDefault();
    $('#first-dialog-message #holder').empty().html("Gold");
    $("#first-dialog-message").dialog("open");
});

$("#clickSilver").on("click", function(e) {
    e.preventDefault();
    $('#first-dialog-message #holder').empty().html("Silver");
    $("#first-dialog-message").dialog("open");
});

$("#clickForSecondBox").on("click", function(e) {
   e.preventDefault();
    $("#first-dialog-message").dialog("close");
   $("#second-dialog-message").dialog("open"); 
});