JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere tellus ac pulvinar lobortis. Quisque ut aliquet velit. Aenean in vestibulum nibh. In libero mi, convallis quis venenatis eu, scelerisque vel erat. Nulla euismod viverra nunc at tincidunt. Duis vitae tellus convallis, accumsan ligula in, accumsan dolor. Vestibulum mattis, lacus ac vulputate molestie, lectus tortor gravida justo, nec tempor velit quam sed magna. In hac habitasse platea dictumst. Sed scelerisque lacus sed nulla congue suscipit.</p>
    <p>In hac habitasse platea dictumst. Proin porta nisi et elit convallis congue nec et augue. In condimentum enim purus, a convallis nulla aliquet sit amet. Sed lacinia arcu in enim ornare, eget euismod elit imperdiet. Sed iaculis auctor diam, eget faucibus urna malesuada in. Maecenas rutrum pharetra iaculis. Nulla vel metus in arcu sagittis porttitor. Phasellus at massa orci.</p>
    <p>Suspendisse eros nulla, rutrum eget eleifend a, eleifend eget risus. Vestibulum non porttitor dui. Sed pharetra, leo quis convallis adipiscing, odio arcu interdum lectus, in facilisis sem dolor ut turpis. Nunc cursus mollis sapien, vitae placerat urna ullamcorper at. Nunc interdum mattis augue, et laoreet purus. Morbi porta arcu quis dui feugiat, ut ullamcorper ante consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris scelerisque urna a massa dapibus, at vehicula erat mollis. Maecenas suscipit sapien eu turpis mattis laoreet. Fusce justo nisl, vestibulum sed accumsan vel, rhoncus ullamcorper mi. Cras lobortis molestie neque vel viverra.</p>
    <p>Nulla libero sem, posuere a neque sit amet, auctor euismod odio. Integer fermentum, quam sed dignissim fermentum, arcu turpis euismod neque, quis tempus lectus odio eu leo. Nullam ut nisi mollis leo venenatis condimentum. Nunc vitae pharetra turpis, ac vestibulum nisl. Mauris in pellentesque orci. Mauris id elementum libero. Pellentesque vitae...

CSS

#confirmDialog {
    display: none;
    position: absolute;
    left: 200px;
    top: 200px;
    width: 400px;
    height: 200px;
    border: 2px solid red;
    background-color: lightgray;
    text-align: center;
}

JavaScript

$("#showConfirm").click(function () {
    createConfirmDialog(

    function () {
        alert("You said ok");
    },

    function () {
        alert("You cancelled");
    });
});

function createConfirmDialog(okCallback, cancelCallback) {
    $("#confirmDialog").show();
    $("#dialogOK").click(function () {
        $("#confirmDialog").hide();
        okCallback();
    });
    $("#dialogCancel").click(function () {
        $("#confirmDialog").hide();
        cancelCallback();
    });
}