JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">

<div class="row">
<div class="col-lg-4">
            <div class="row">
                <div class="col-lg-12 metro-1">
                    <img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
                    <a href="#" class="metro-link"></a>
                    <div class="top-text-block">
                        <div class="top-text-block-inner">
                            check out our<br>hottest product
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="col-lg-12 metro-2">
                <div class="row upper-metro">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
                        <a href="#" class="block-layer">
                            <div class="block-layer-inner">
                            </div>
                        </a>
                        <div class="bottom-text-block">
                            <div class="block-name">
                                Text
                            </div>
                            <div class="block-price">
                                Price
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                        <img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
                        <a href="#" class="block-layer">
                            <div class="block-layer-inner">
                            </div>
                        </a>
                        <div class="bottom-text-block">
                            <div class="block-name">
               ...

SCSS

.metro-1 {
	padding: 0px;
}
.metro-link {
	// background: rgba(0,24,333,0.5);
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
}
.metro-2 {
	padding: 0px;
	.upper-metro {
		padding: 0px;
		div {
			padding: 0px;
		}
	}
	.lower-metro {
		padding: 0px;
		div {
			padding: 0px;
		}
		.lower-metro-inner {
			display: flex;
    		align-items: center;
		}
	}
}
.metro-3 {
	padding: 0px;
	div {
		padding: 0px;
	}
	.right-metro {
		display: flex;
    	align-items: center;
	}
}
.metro-4 {
	padding: 0px;
	div {
		padding: 0px;
	}
}
.bottom-text-block {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	height: 40px;
	.block-name {
		color: white;
		font-weight: bold;
		padding-left: 5px !important;
	}
	.block-price {
		color: white;
		padding-left: 5px !important;
		// margin-bottom: 5px !important;
	}
}
.bottom-text-block-new {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	height: 40px;
	.block-name {
		color: white;
		font-weight: bold;
		padding-left: 5px !important;
	}
	.block-price {
		color: white;
		padding-left: 5px !important;
		// margin-bottom: 5px !important;
	}
	.new-box {
		text-transform: uppercase;
		padding: 5px !important;
		color: white;
		background: red;
		display: flex;
		align-items: center;
		height: 45px;
		position: absolute;
		&:before {
			content: 'new';
		}
	}
	.block-detail {
		position: absolute;
		left: 45px;
	}
}
.winit-box {
	padding: 2px !important;
}

.top-text-block {
	position: absolute;
	top: 0;
	left: 0;
	padding: 30px;
	text-align: center;
	@include ipad {
		right: 0;
	}
	.top-text-block-inner {
		border-top: 5px solid white;
		border-bottom: 5px solid white;
		width: 200px;
		display: inline-block;
		text-align: center;
		color: white;
		text-transform: uppercase;
		font-weight: bold;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}
.center-text-block {
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
	color: white;
	font-weight: bold;
	font-size: 24px;
	text-transform:...