JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<div class="portfolio-wrapper">


    <div class="portfolio-item">
        <div class="aspect-ratio"></div>
        <div class="content">
           content goes here
        </div>
    </div>
    
    <div class="portfolio-item">
        <div class="aspect-ratio"></div>
        <div class="content">
            content goes here
        </div>
    </div>
    
     <div class="portfolio-item">
        <div class="aspect-ratio"></div>
        <div class="content">
            content goes here
        </div>
    </div>
    
     <div class="portfolio-item">
        <div class="aspect-ratio"></div>
        <div class="content">
            content goes here
        </div>
    </div>
    
     <div class="portfolio-item">
        <div class="aspect-ratio"></div>
        <div class="content">
            content goes here
        </div>
    </div>
    
     <div class="portfolio-item">
        <div class="aspect-ratio"></div>
        <div class="content">
            content goes here
        </div>
    </div>
    
</div>

CSS

.portfolio-item {
	position: relative;
	width: 20%; 
    float: left;
}

.aspect-ratio {
    background: url(http://fc01.deviantart.net/fs15/i/2007/011/7/1/Kitten_Stock___Looking_Scared_by_Gracies_Stock.jpg);
    background-size: cover;
    padding-bottom: 66.666%;
}

.content {
    position: absolute;
    top: 0;  bottom: 0;  left: 0;  right: 0;
}

@media (max-width: 700px) {
.portfolio-item {width: 33%}
}

@media (max-width: 500px) {
.portfolio-item {width: 50%}
}

@media (max-width: 400px) {
.portfolio-item {width: 100%}
}