JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="background2">
<div class="splash">  <div class="main"></div>
<div class="slide th1"><div class="polaroid pol1"><span></span></div></div>
<div class="slide th2"><div class="polaroid pol2"><span></span></div></div> 
<div class="slide th3"><div class="polaroid pol3"><span></span></div></div>
<div class="slide th4"><div class="polaroid pol4"><span></span></div></div>
<div class="slide th5"><div class="polaroid pol5"><span></span></div></div>
<div class="slide th6"><div class="polaroid pol6"><span></span></div></div>
</div>
</div>


<div class="photo">
<span></span>
</div>

CSS

body {margin:0;}

.splash {height:700px;width:1184px;background-color:#ffffff;position:relative;margin:auto;z-index:0;}

.th1, .th3, .th5 {filter: drop-shadow(2px 2px 4px rgba(50, 50, 50, 0.4));}
.th2, .th4, .th6 {filter: drop-shadow(-2px 2px 4px rgba(50, 50, 50, 0.4));}

.slide {height:222px;width:222px;margin: auto;position: absolute;z-index:-1;}

.th1 {top: 30px;  left: 50px; }

.th2 {right: 50px; top: 30px; }

.th3 {top: 0;  bottom: 0; left:10px;}

.th4 {right: 10px; top: 0; bottom: 0;}

.th5 {bottom: 40px;left:50px; }

.th6 {right: 50px;  bottom: 40px; }

.pol1 {rotate: -15deg;}

.pol2 {rotate: 15deg;}

.pol3 {}

.pol4 {}

.pol5 {rotate: 20deg;}

.pol6 {rotate: -20deg;}


.polaroid {background-color:#ffffff;margin: auto;position: absolute;padding:10px;border-radius:3px;}
.polaroid span {display:block;height:202px;width:202px;background-color:#dedede;border-radius:3px;}

.pol1, .pol3, .pol5 {box-shadow:
  2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  100px 100px 80px rgba(0, 0, 0, 0.07);}
.pol2, .pol4, .pol6 {
  box-shadow:
  -2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  -6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  -12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  -22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  -41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  -100px 100px 80px rgba(0, 0, 0, 0.07);
}

.main {width:700px;height:700px;background-color:#cccccc;margin:auto;z-index:1;border-radius:500px;}

@media screen and (max-width: 1200px) { 
.slide {display:none;}
.splash {height:auto;width:auto;margin:auto;z-index:0;}
}




.photo {background-color:#ffffff;padding:10px;margin:50px;display:inline-block;border-radius:3px;

filter: drop-shadow(2px 2px 4px rgba(50, 50, 50, 0.4));

box-shadow:
  2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0,...