JSFiddle - React, Tailwind, and code Playground

by rohanmod27

HTML

<div id="imagoroid">
<imagemania>
<img src="http://4.bp.blogspot.com/-zaOreD5GjRw/UmiFX4cJQLI/AAAAAAAAIjw/SCfLCLKkoNc/s320/kissing-teen-couple-romantic-lovers-girl-boy-sexy.jpg" width="200" height="200" alt="Red mushroom" />
<imagecaption>Love in the air</imagecaption>
</imagemania>
<imagemania>
<img src="http://1.bp.blogspot.com/-RLnjIsXHuOU/Umh8RMst0qI/AAAAAAAAIjg/S8J8zxJAkag/s320/Sad-hug-couple-on-beach-sand-alone-lonely.jpg" width="200" height="200" alt="Rainbow near Keswick" />
<imagecaption>Love is immortal</imagecaption>
</imagemania>
<imagemania>
<img src="http://1.bp.blogspot.com/-N8KR03-z-b8/Uotwrl9s9NI/AAAAAAAAItY/CKEE6xkPbJQ/s320/young-love-inspiration-shoot0211.jpg" width="200" height="200" alt="An old tree" />
<imagecaption>Miss you baby</imagecaption>
</imagemania>
</div><!--end imagoroid-->

CSS

imagemania, imagecaption {
display: block;
}
#imagoroid{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#imagoroid imagemania{
float:left;
position:relative;
width:200px;
margin:10px 20px;
padding: 6px 8px 10px 8px;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background: #eee6d8;
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
}
#poaroid imagemania:nth-child(even) {
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#imagoroid imagemania:before {
content: '';
display: block;
position: absolute;
left:5px;
top: -15px;
width: 75px;
height: 25px;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#imagoroid imagemania:nth-child(even):before {
left:150px;
top: -15px;
width: 55px;
height: 25px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#imagoroid...