JSFiddle - React, Tailwind, and code Playground

by suhail

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="banner" class="banner">
  banner example
</div>

<div id="pmgky" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

CSS

.banner {
  width: 100%;
  height: 50px;
  background: teal;
  color: white;
  font-size: 30px;
  text-align: center;
  padding: 25px
}

JavaScript

$("#pmgky").dialog({
  model: true,
  width: 500,
  height: 300,
  closeOnEscape: false,
  hide: { effect: "transfer", {to:"#banner"} }
})