JSFiddle - React, Tailwind, and code Playground

by Steve

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/css/foundation.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/js/foundation/foundation.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/js/foundation/foundation.reveal.js"></script>
<div id="report-abuse" class="reveal-modal small" data-reveal>
  <h2>Report</h2>
  <div id="abuse-form">
    <h3>Reason (optional)?</h3>
    <form action="/report" method="post">
      <input type="hidden" id="reaction" name="reaction" value="0" />
      <textarea name="comment" rows="5" cols="50"></textarea>
      <button class="small secondary radius" type="submit">Continue</button>
    </form>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

<a href="#" class="report" data-post-id="1">Click</a>

JavaScript

jQuery(function($) {
    $(document).foundation();
    $('a.report').click(function(e){
        $('#report-abuse').foundation('reveal', 'open');
        e.preventDefault();
    });
});