JSFiddle - React, Tailwind, and code Playground

by blog Canonium

HTML

<!-- Dialog -->
<dialog class="modal" id="myWindowOne" role="dialog" open>
  <header class="modal-header">
    <h1>Dialog</h1>
  </header>
  <main class="modal-main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, neque quasi. Distinctio sapiente modi, sequi libero unde blanditiis impedit sit dolorem vero deleniti facilis a debitis voluptatum. Laboriosam, nostrum sint!</p>
  </main>
  <footer class="modal-footer">
    <button class="btn btn-close" data-action="modal-close">Close</button>
    <button class="btn btn-accept" data-action="modal-accept">Accept</button>
  </footer>
</dialog>

<!-- Show dialog -->
<button class="btn" data-tools="dialog" data-target="#myWindowOne">Show dialog</button>