JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="content">
  <div class="row">
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
      <h3>&nbsp;&nbsp;Youtube Video Gallery Using Bootstrap Modal Popup</h3>
      <div class="col-sm-2">
        <div class="panel panel-default">
          <div class="panel-heading">
            <a class="linkSource">
                                <img src="//img.youtube.com/vi/A5NA89oTD8A/0.jpg" alt="https://www.youtube.com/vi/A5NA89oTD8A" class="img-responsive">
                            </a>
          </div>
          <div class="panel-footer text-center">Windows Authentication</div>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="panel panel-default">
          <div class="panel-heading">
            <a class="linkSource">
                                <img src="//img.youtube.com/vi/h1rLsvKXNfk/0.jpg" alt="https://www.youtube.com/vi/h1rLsvKXNfk" class="img-responsive">
                            </a>
          </div>
          <div class="panel-footer text-center">Datatables</div>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="panel panel-default">
          <div class="panel-heading">
            <a class="linkSource">
                                <img src="//img.youtube.com/vi/1oye7q74v5U/0.jpg" alt="https://www.youtube.com/vi/1oye7q74v5U" class="img-responsive">
                            </a>
          </div>
          <div class="panel-footer text-center">System Environment</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div...

CSS

img {
  cursor: pointer;
}

JavaScript

$(".linkSource").click(function() {
   $("#myCarousel").carousel();
   $("#myModal").modal("show");
 });