JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolio-grid">
	
	<a href="#" class="portfolio-item">
		<div class="wrapper">
			<div class="dp" style="background: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') center center no-repeat; background-size: cover;"></div>
			<div class="details">
				<h2>Post Title</h2>
				<p>Excerpt...</p>
			</div>
		</div>
		
	</a>
	
	<a href="#" class="portfolio-item">
		<div class="wrapper">
			<div class="dp" style="background: url('http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg') center center no-repeat; background-size: cover;"></div>
			<div class="details">
				<h2>Post Title</h2>
				<p>Excerpt...</p>
			</div>
		</div>
	</a>
	
	<a href="#" class="portfolio-item">
		<div class="wrapper">	
			<div class="dp" style="background: url('http://www.seoghostwriter.com/wp-content/themes/thesis_151/rotator/sample-4.jpg') center center no-repeat; background-size: cover;"></div>
			<div class="details">
				<h2>Post Title</h2>
				<p>Excerpt...</p>
			</div>
		</div>
	</a>
	
	<a href="#" class="portfolio-item">
		<div class="wrapper">
			<div class="dp" style="background: url('http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample1_l.jpg') top center no-repeat; background-size: cover;"></div>
			<div class="details">
				<h2>Post Title</h2>
				<p>Excerpt...</p>
			</div>
		</div>
	</a>
	
</div>

SCSS

.portfolio-grid {
        .portfolio-item {
            display: block;
            text-decoration: none;
            float: left;
            width: 33.333333%;
            padding: 15px;
            font-family: Arial, sans-serif;
            box-sizing: border-box;
            
            .dp {
                display: block;
                padding-top: 56.25%;
            }
            
            .details {
                h2 {
                    margin: 20px 0 6px;
                }
                
                p {
                    margin: 6px 0;
                }
            }
            
            /* Control .portfolio-item's width on Various Screen Sizes */
            @media(max-width:767px) {
                width: 50%;
            }
            @media(max-width:479px) {
                width: 100%;
            }
            /* ------ */
        }
    }