JSFiddle - React, Tailwind, and code Playground

by antelopelovefan

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 <div class="container">
            <div class="container-header">
                <span>Thing 1</span>
                <a href="#" class="info" data-info-id="dialog-modal"><img src="http://i.imgur.com/1LzfQBW.png" alt="Info" /></a>
            </div>
            <div class="container-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean risus augue, consequat nec eros nec, ornare vulputate elit.</p>
            </div>
            <div id="dialog-modal" class="modal-dialog" title="Basic modal dialog">
                <p>This is dialog 1.</p>
            </div>
        </div>
        
        <div class="container">
            <div class="container-header">
                <span>Thing 2</span>
                <a href="#" class="info" data-info-id="dialog-modal2"><img src="http://i.imgur.com/1LzfQBW.png" alt="Info" /></a>
            </div>
            <div class="container-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean risus augue, consequat nec eros nec, ornare vulputate elit.</p>
            </div>
            <div id="dialog-modal2" class="modal-dialog" title="Basic modal dialog 2">
                <p>This is dialog 2.</p>
            </div>
        </div>
        
        <div class="container">
            <div class="container-header">
                <span>Thing 2</span>
                <a href="#" class="info" data-info-id="dialog-modal3"><img src="http://i.imgur.com/1LzfQBW.png" alt="Info" /></a>
            </div>
            <div class="container-body">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean risus augue, consequat nec eros nec, ornare vulputate elit.</p>
            </div>
            <div id="dialog-modal3" class="modal-dialog"...

CSS

.container {
            width: 50%;
            height: 160px;
            border: 1px solid #ddd;
            margin: 7px auto 7px auto;
        }
        .container-header {
            position: relative;
            background: #ddccaa;
            height: 45px;
        }
        .container-body {
            padding: 14px;
        }
        a.info {
            display: block;
            position: absolute;
            top: 3px;
            right: 5px;
        }
        .modal-dialog {
            display: none;
        }

JavaScript

(function ($) {
     if (typeof console == "undefined") console = { log: function () { } };
     
     $(document).ready(function () {
         console.log('ready');
         
         $('a.info').click(function (e) {
             console.log('info button click');
             e.preventDefault();
             
             var id = '#' + $(this).data('info-id');
             console.log(id);
             
             $(id).dialog({
                 width: 400,
                 modal: true
             });
         });
     });
 })(jQuery);