JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css"><script>
          $(function() {
            $( "#dialog" ).dialog({autoopen: false});
            $( "#dialog" ).dialog("close");
          });
          $(document).ready(function() {
            $('#discountDetailsId').click(function() {
              $( "#dialog" ).dialog({ modal: true });
            });
          });
        </script></head>
   <body>
      <table>
         <tr>
            <td id="discountDetailsId">DiscountDetails</td>
         </tr>
      </table>
      <div id="dialog" title="Discount Details">
         <table class="tbpromotionTypes">
            <tr>
               <td class="ptLeft ">Bread</td>
               <td class="ptRight">$1</td>
            </tr>
            <tr>
               <td class="ptLeft ">Eggs</td>
               <td class="ptRight">$2</td>
            </tr>
            <tr>
               <td class="ptLeft ">Milk</td>
               <td class="ptRight">$2</td>
            </tr>
         </table>
      </div>
   </body>
</html>