JSFiddle - React, Tailwind, and code Playground

HTML

<article class="main-home">
	<div class="header">
		<div class="crumb">Placehole</div>
	</div>

	<div class="body">
		<img src="http://placehold.it/350x150" class="block_img"/>
	</div>
</article>

CSS

article.main-home
{
	clear: both;
	overflow: hidden;
}
article.main-home .body .block_img
{
	float: left;
	width: 50%;
}
article.main-home .body .block_img:before 
{
    background-image: -moz-linear-gradient(left center , rgba(255, 0, 85, 0.2) 0px, rgba(255, 0, 85, 0) 25%);
    background-size: 100% auto;
    content: "";
    display: block;
    height: 100%;
    left: 0 !important;
    position: absolute;
    top: 0 !important;
    width: 100%;
}