JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<div class="col-md-12">
					<div class="row">
						<div class="col-md-3 col-sm-4 col-xs-6 mt-lg-10 mt-md-10 mt-sm-10 mt-xs-5">
							<a class="img-thumbnail" data-fancybox="images" href="<?= $arDopPhoto['DETAIL']['SRC'] ?>" data-plugin-options="{&quot;type&quot;:&quot;image&quot;}">
								<img class="img-responsive" src="<?= $arDopPhoto['THUMB']['src'] ?>" title="<?= $arDopPhoto['TITLE'] ?>" alt="<?= $arDopPhoto['ALT'] ?>">
								<span class="zoom hidden-xs hidden-sm">
									<i class="fa fa-16 fa-white-shadowed fa-search"></i>
								</span>
							</a>
						</div>
						<div class="col-md-3 col-sm-4 col-xs-6 mt-lg-10 mt-md-10 mt-sm-10 mt-xs-5">
							<a class="img-thumbnail" data-fancybox="images" href="<?= $arDopPhoto['DETAIL']['SRC'] ?>" data-plugin-options="{&quot;type&quot;:&quot;image&quot;}">
								<img class="img-responsive" src="<?= $arDopPhoto['THUMB']['src'] ?>" title="<?= $arDopPhoto['TITLE'] ?>" alt="<?= $arDopPhoto['ALT'] ?>">
								<span class="zoom hidden-xs hidden-sm">
									<i class="fa fa-16 fa-white-shadowed fa-search"></i>
								</span>
							</a>
						</div>
						<div class="col-md-3 col-sm-4 col-xs-6 mt-lg-10 mt-md-10 mt-sm-10 mt-xs-5">
							<a class="img-thumbnail" data-fancybox="images" href="<?= $arDopPhoto['DETAIL']['SRC'] ?>" data-plugin-options="{&quot;type&quot;:&quot;image&quot;}">
								<img class="img-responsive" src="<?= $arDopPhoto['THUMB']['src'] ?>" title="<?= $arDopPhoto['TITLE'] ?>" alt="<?= $arDopPhoto['ALT'] ?>">
								<span class="zoom hidden-xs hidden-sm">
									<i class="fa fa-16 fa-white-shadowed fa-search"></i>
								</span>
							</a>
						</div>
						
					</div>
				</div>