JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.10.2/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.10.2/semantic.min.css">

JavaScript

var dialog = $('<div class="ui modal"><i class="close icon"></i><div class="header">Test</div></div>')
		.append('<div class="content">Test 1</div>')
		.append('<div class="actions"><div class="ui positive button">Close</div></div>')
		.modal({
            onVisible: function() {
                dialog.find('.actions .button').click(function() {
                    dialog.modal('hide');
                    
                    $('<div class="ui modal"><i class="close icon"></i><div class="header">Test</div></div>')
                    .append('<div class="content">Test 2</div>')
                    .append('<div class="actions"><div class="ui positive button">Close</div></div>')
                    .modal({
                        onHidden: function() {
                            $(this).remove();
                        }
                    })
                    .modal('show'); 
                });
            },
            onApprove: function() {
                return false;
            }
		})
		.modal('show');