JSFiddle - React, Tailwind, and code Playground

by tobek

HTML

<div class="art-cont" id="art">
    <div class="art-1">
    </div>
    <div class="art-2">
    </div>
    <div class="art-3">
    </div>
    </div>

CSS

.art-cont{
    	width:100%;
    	height:400px;
    }
.art-1, .art-2, .art-3 {
      background-image: url(https://cdn.stocksnap.io/img-thumbs/960w/2SQMYBPQGK.jpg);
      background-size: cover;
      background-position: center center;
}
    .art-1{
    	width:70%;
    	height:50%;
    	float:left;
    	position:relative;
    	overflow:hidden;
    	border:2px solid #fff;
      box-sizing:border-box;
    }
    .art-2{
    	width:30%;
    	height:50%;
    	float:left;
    	position:relative;
    	overflow:hidden;
    	border:2px solid #fff;
      box-sizing:border-box;
    }
    .art-3{
    	width:100%;
    	height:50%;
    	clear:both;
    	position:relative;
    	overflow:hidden;
    	border:2px solid #fff;
      box-sizing:border-box;
    }
    
.art-cont img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}