JSFiddle - React, Tailwind, and code Playground

by sammasati

HTML

<div id="content">
 
             <div class="photo_container">
                 <div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo3"><a href=""><img  src="pics/my_photo.jpg" alt="фотка моя"/></a><div  class="album_name"><a href="">Название  альбома</a></div></div>
                 </div>
             <div class="photo_container">
                 <div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo3"><a href=""><img  src="pics/my_photo.jpg" alt="фотка моя"/></a><div  class="album_name"><a href="">Название  альбома</a></div></div>
                 </div>
             <div class="photo_container">
                 <div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo3"><a href=""><img  src="pics/my_photo.jpg" alt="фотка моя"/></a><div  class="album_name"><a href="">Название  альбома</a></div></div>
                 </div>
             <div class="photo_container">
                 <div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo3"><a href=""><img  src="pics/my_photo.jpg" alt="фотка моя"/></a><div  class="album_name"><a href="">Название  альбома</a></div></div>
                 </div>
             <div class="photo_container">
                 <div class="photo"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo photo2"><img src="pics/my_photo.jpg" alt="фотка моя"/></div>
                 <div class="photo...

CSS

#content {
    overflow: hidden;
}
.photo_container
 {
     position: relative;
top: 30px;
    float: left;
    width: 200px;
    height: 160px;
    margin: 0 10px 10px 0;
    padding: 20px;
}
 .photo
 {
     position: absolute;
     width: 183px;
     height: 148px;
     background: url(pics/pframe.png);
     -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);
     -moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.21);
     box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.21);
 
 }
 .photo img
 {
     position: absolute;
     top: 20px;
     left: 20px;
 }
 .album_name
 {
     position:absolute;
     font: 10pt 'Open Sans';
     color: #515151;
     top: 122px;
     padding: 0 30px;
 }
 .photo2
 {
     -moz-transform: rotate(-10deg);
     -webkit-transform: rotate(-10deg);
     -o-transform: rotate(-10deg);
     -ms-transform: rotate(-10deg); /* для IE9 */
     transform: rotate(-10deg); /* на будущее */
     -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);
     -moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.21);
     box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.21);
     top: 20px;
     left: 20px;
     
 }
 .photo3
 {
     -moz-transform: rotate(5deg);
     -webkit-transform: rotate(5deg);
     -o-transform: rotate(5deg);
     -ms-transform: rotate(5deg); /* для IE9 */
     transform: rotate(5deg); /* на будущее */
     -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.21);
     -moz-box-shadow:    3px 3px 5px rgba(50, 50, 50, 0.21);
     box-shadow:         3px 3px 5px rgba(50, 50, 50, 0.21);
     top: 20px;
     left: 20px;
 }