JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<center>
<div id="Thumbnails">
<a id="FirstBannersThumb"><img src="../Images/Thumbnails/3DBanners.png" alt="3D Banners" class="Thumbs" /></a>
<div id="FirstBanners">
	<img src="../Images/Still Benners/DayZSnowy.png" alt="DayZ Snowy" id="DayZSnowy" class="StillBanners" />
    <p id="DayZSnowyCaption" class="BannerCaptions">DayZ Snowy Banner</p>
    <img src="../Images/Still Benners/InFa.png" alt="InFa Space" id="InFaSpace" class="StillBanners" />
    <p id="InFaSpaceCaption" class="BannerCaptions">InFa Space Banner</p>
    <img src="../Images/Still Benners/L7Zeon.png" alt="L7 Zeon" id="L7Zeon" class="StillBanners" />
    <p id="L7ZeonCaption" class="BannerCaptions">L7 Zeon Banner</p>
    <img src="../Images/Still Benners/Mythh.jpg" alt="Void Mythh" id="Mythh" class="StillBanners" />
    <p id="MythhCaption" class="BannerCaptions">Void Mythh Banner</p>
    <img src="../Images/Still Benners/L7ArtsRiver.png" alt="L7 Arts" id="L7ArtsRiver" class="StillBanners" />
    <p id="L7ArtsRiverCaption" class="BannerCaptions">L7 Arts Banner</p>
    <img src="../Images/Still Benners/Insan3Lik3Var2.jpg" alt="Insan3Lik3" id="Insan3Lik3" class="StillBanners" />
    <p id="Insan3Lik3Caption" class="BannerCaptions">Insan3Lik3 Banner</p>
    <img src="../Images/Still Benners/Soulja.JPG" alt="S3 Soulja" id="Soulja" class="StillBanners" />
    <p id="SouljaCaption" class="BannerCaptions">S3 Soulja Banner</p>
    <img src="../Images/Still Benners/Zorich.jpg" alt="Zorich" id="Zorich" class="StillBanners" />
    <p id="ZorichCaption" class="BannerCaptions">Zorich Banner</p>
    <img src="../Images/Still Benners/Invade.png" alt="L7 Invade" id="Invade" class="StillBanners" />
    <p id="InvadeCaption" class="BannerCaptions">L7 Invade Banner</p>
    <img src="../Images/Still Benners/ExampleFX.jpg" alt="ExampleFX" id="ExampleFX" class="StillBanners" />
    <p id="ExampleFXCaption" class="BannerCaptions">ExampleFX Banner (This is 3D because some buildings in background are 3D Modelled)</p>
   ...

CSS

body {
  height: 1000px;
}

#Thumbnails {
	position:absolute;
	top:460px;
	-webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.70));
    filter:         drop-shadow(5px 5px 5px rgba(0,0,0,0.70));
}
.Thumbs {
	cursor:pointer;
}
.BannerCaptions {
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-transform:capitalize;
	font-size:26px;
	color:#FFFFFF;
	padding:5px 0px 20px 0px;
}
.StillBanners {
	width:1500px;
}
#DayZSnowy {
	padding-top:15px;
}

JavaScript

$("#FirstBannersThumb").click(function() {
 alert();
        $("#FirstBanners").slideToggle(1000);
    });