JSFiddle - React, Tailwind, and code Playground

by MartijnR

HTML

<div id="dialog-alert" role="dialog" aria-labelledby="alert dialog" aria-hidden="true" data-keyboard="true" data-reveal="" class="modal" style="display: block; opacity: 1; visibility: visible; top: 100px;">
    <div class="modal__header">
         <button type="button" aria-hidden="true" class="btn-icon-only close-reveal-modal">×</button>
         <h3></h3>
    </div>
    <div class="modal__body">
         <p></p>
     </div>
     <div class="modal__footer">
          <span class="self-destruct-timer"></span>
          <button type="button" aria-hidden="true" class="btn btn-default close">Close </button>
     </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.reveal.js"></script>

JavaScript

$('#dialog-alert').foundation('reveal', 'open');
$('#dialog-alert').foundation('reveal', 'open');