JSFiddle - React, Tailwind, and code Playground
by ktpmm5
HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="stories" class="gallery-container section-container">
<div class="container">
<div class="row">
<div class="col gallery section-description wow fadeIn">
<h2 class="section-title">Stories </h2>
<div class="divider-1 wow fadeInUp"><span></span></div>
</div>
</div>
<div class="row">
<!-- First row of images -->
<div class="col-md-3 gallery-box wow fadeInDown">
<div data-toggle="modal" class="shadow" data-target="#myModal">
<img src="https://i.imgur.com/nUNhspp.jpg" alt="WVU" data-target="#myCarousel" data-slide-to="0">
</div>
</div>
<div class="col-md-3 gallery-box wow fadeInUp">
<div data-toggle="modal" class="shadow" data-target="#myModal">
<img src="https://i.imgur.com/nUNhspp.jpg" data-target="#myCarousel" data-slide-to="1">
</div>
</div>
<div class="col-md-3 gallery-box wow fadeInDown">
<div data-toggle="modal" class="shadow" data-target="#myModal">
<img src="https://i.imgur.com/nUNhspp.jpg" alt="Image 2" data-target="#myCarousel"
data-slide-to="2">
</div>
</div>
<div class="col-md-3 gallery-box wow fadeInDown">
<div data-toggle="modal" class="shadow" data-target="#myModal">
<img src="img/gallery/2.jpg" alt="Image 2" data-target="#myCarousel"
...
CSS
img {
width: 100px;
height: 100px;
}