JSFiddle - React, Tailwind, and code Playground

by filistea

HTML

<div id='test'>
    <button class='test'>click me</button>
</div>
<div id="ChooseStoryCategory">
    <div id="storyCategory">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta purus elit, quis volutpat velit malesuada eget. Proin hendrerit dignissim arcu quis sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras elementum feugiat iaculis. Integer eu consectetur nunc. In ut nunc vitae urna pellentesque placerat quis ac ligula. Donec eleifend tempor ante, id tristique urna tristique nec. Integer sit amet neque sit amet ligula vestibulum porttitor ac ac lorem.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer lacinia lacus vitae purus feugiat interdum. Nullam ut risus lacus. Suspendisse aliquet mi nulla, ac feugiat nisi consectetur nec. Nulla pellentesque nunc at dolor ullamcorper egestas. Mauris tortor orci, lobortis ut lacinia vitae, imperdiet non nibh. Quisque ullamcorper non sem ac tempor. Sed odio tellus, volutpat vitae elit eget, cursus suscipit tortor. Proin non justo libero. Sed ultrices ligula elit, quis blandit lacus lacinia eu. Etiam quis commodo enim. Donec lobortis fermentum justo, eget porta massa tristique ac. Vestibulum ultrices nibh sed lorem condimentum commodo. Suspendisse tempus ligula id mauris pellentesque, a hendrerit sem laoreet. Aenean ullamcorper sapien non sagittis facilisis.

Morbi id mi mauris. Suspendisse velit ipsum, iaculis vel tincidunt ac, commodo sit amet arcu. Quisque malesuada malesuada urna a ultricies. Nam fringilla faucibus magna in rutrum. Morbi facilisis suscipit turpis id ornare. Vivamus dignissim pretium tempor. Nulla fringilla elit et nunc pellentesque, et sollicitudin magna ultrices.

Vestibulum vestibulum tortor in velit placerat pulvinar. Fusce accumsan enim dapibus, dignissim sapien vel, dapibus turpis. Curabitur rutrum, sapien eu cursus malesuada, diam nisl mattis tortor, eu suscipit metus dolor ut lectus. Nullam diam...

CSS

.blue{background:blue}

JavaScript

$(".test").on("click", function () {
    $("#ChooseStoryCategory").dialog("open");
});

$("#ChooseStoryCategory").dialog({
    autoOpen: false,
    title: "Upload",
    height: 600,
    width: 500,
    modal: true,
    buttons: {
        "Choose category": function(){
            // Do something
            $('body').toggleClass('blue')
            $( this ).dialog( "close" );
        },
        Cancel: function(){
            $( this ).dialog( "close" );
        }
    }
});