JSFiddle - React, Tailwind, and code Playground

by ericb14

HTML

<head>
  
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>  
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  
</head>

<html>

<body>


  <div class="container mx-auto">
    <div class="row  product_row d-flex justify-content-center">
      <div class="col-md-3 col-sm-12 items product_1" data-caption="This is the data caption for product 1">
        <img class="img-fluid" src="https://loremflickr.com/cache/resized/1883_29241770697_126d70579c_n_320_240_nofilter.jpg" />
      </div>
      <div class="col-md-3 col-sm-12 items product_2" data-caption="This is the caption for product 2">
        <img class="img-fluid" src="https://loremflickr.com/cache/resized/1883_29241770697_126d70579c_n_320_240_nofilter.jpg" />
      </div>
      <div class="col-md-3 col-sm-12 items product_3" data-caption="This is the caption for product 3">
        <img class="img-fluid" src="https://loremflickr.com/cache/resized/1883_29241770697_126d70579c_n_320_240_nofilter.jpg" />
      </div>
    </div>
    <!-- --- Start Second Product Row --- -->
    <div class="row product_row d-flex justify-content-center">
      <div class="col-md-3 col-sm-12 items product_4" data-caption="This is the data caption for product 4">
        <img class="img-fluid" src="https://loremflickr.com/cache/resized/1883_29241770697_126d70579c_n_320_240_nofilter.jpg" />
      </div>
      <div class="col-md-3 col-sm-12 items product_5" data-caption="This is the data caption for product 5">
        <img class="img-fluid" src="https://loremflickr.com/cache/resized/1883_29241770697_126d70579c_n_320_240_nofilter.jpg" />
      </div>
      <div...

CSS

img {
  padding:.1em;
}

JavaScript

$('.items').on('click', function() {
  var elt = $(this);
  var text = elt.closest('.items').data('caption');
  $('#pop_up').dialog().html(text);
});