JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="right">


<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>


<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/03.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/04.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/02.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/04.jpg" alt="Book 4"/>

<img class="fancyboxthumbnailsgallerybook0" src="http://www.starkasia.com/wp-content/uploads/book4/01.jpg" alt="Book 4"/>

CSS

.fancyboxthumbnailsgallerybook0{ max-width: 500px; height:500px; float:left; width: 23%; margin:5px 5px 0px 5px; background-color:#1E1E1E; overflow:hidden;  }


@media (max-width: 1260px) { .fancyboxthumbnailsgallerybook0 { width: 30%; } }

@media (max-width: 1024px) { .fancyboxthumbnailsgallerybook0 { width: 47%; } }

@media (max-width: 500px)  { .fancyboxthumbnailsgallerybook0 { width: 98%; } }


/* 
.fancyboxthumbnailsgallerybook0  { display:inline; max-height:500px; background-color:#1E1E1E; overflow:hidden; margin:10px 10px 0px 0px} 

.right
{ height:500px; width: 23%; float:left; }
    
@media (max-width: 1260px) { .right { width: 30%; } }

@media (max-width: 1024px) { .right { width: 47%; } }

@media (max-width: 500px)  { .right { width: 95%; } }

*/