JSFiddle - React, Tailwind, and code Playground

by sensei

HTML

<section>
	<ul class="list">
	
		<li class="list__item">
			<a class="list__tile" href="#">
				<div class="list__tile-shape">
					<div class="list__tile-image" style="background-image: url(https://image.winudf.com/v2/image/Y29tLmJsd3AubmF0dXJlX3NjcmVlbl84XzE1MzczNjQwMTdfMDU5/screen-8.jpg?fakeurl=1&type=.jpg)"></div>
				</div>
				
				<div class="list__tile-body">lorem ipsum</div>
			</a>
		</li>
		
		<li class="list__item">
			<div class="list__tile">
				<div class="list__tile-shape">
					<div class="list__tile-image" style="background-image: url(https://image.winudf.com/v2/image/Y29tLmJsd3AubmF0dXJlX3NjcmVlbl84XzE1MzczNjQwMTdfMDU5/screen-8.jpg?fakeurl=1&type=.jpg)"></div>
				</div>
				
				<div class="list__tile-body">lorem ipsum</div>
			</div>
		</li>
		
		<li class="list__item">
			<div class="list__tile">
				<div class="list__tile-shape">
					<div class="list__tile-image" style="background-image: url(https://image.winudf.com/v2/image/Y29tLmJsd3AubmF0dXJlX3NjcmVlbl84XzE1MzczNjQwMTdfMDU5/screen-8.jpg?fakeurl=1&type=.jpg)"></div>
				</div>
				
				<div class="list__tile-body">lorem ipsum</div>
			</div>
		</li>
		
		<li class="list__item">
			<div class="list__tile">
				<div class="list__tile-shape">
					<div class="list__tile-image" style="background-image: url(https://image.winudf.com/v2/image/Y29tLmJsd3AubmF0dXJlX3NjcmVlbl84XzE1MzczNjQwMTdfMDU5/screen-8.jpg?fakeurl=1&type=.jpg)"></div>
				</div>
				
				<div class="list__tile-body">lorem ipsum</div>
			</div>
		</li>
		
		<li class="list__item">
			<div class="list__tile">
				<div class="list__tile-shape">
					<div class="list__tile-image" style="background-image: url(https://image.winudf.com/v2/image/Y29tLmJsd3AubmF0dXJlX3NjcmVlbl84XzE1MzczNjQwMTdfMDU5/screen-8.jpg?fakeurl=1&type=.jpg)"></div>
				</div>
				
				<div class="list__tile-body">lorem ipsum</div>
			</div>
		</li>
		
		<li class="list__item">
			<div class="list__tile">
				<div class="list__tile-shape">
					<div...

SCSS

body {
	margin: 0;
}

section {
	overflow: hidden;
	//margin: 50px;

}


.list {	
	display: flex;
	flex-wrap: wrap;
	
	margin: 0;
	padding: 0;
	
	list-style: none;
	
	&__item {
		width: 33.33333%;
		
		&:nth-child(5n), &:nth-child(5n-1)  {
			width: 50%;
		}
	}
	
	&__item:nth-child(5n-1) &__tile-shape,
	&__item:nth-child(5n-4) &__tile-shape {
		left: -100px;
	}
	
	&__item:nth-child(5n) &__tile-shape,
	&__item:nth-child(5n-2) &__tile-shape {
		right: -100px;
	}

	&__tile {
		display: block;
		
		height: 200px;
		
		overflow: hidden;
		
		background: #ccc;
		outline: 2px solid #aaa;

		transform: skew(-15deg);
		
		&-image {
			//display: none;
			
			position: absolute;
			top: 0;		left: 0;
			bottom: 0;	right: 0;
			
			margin: 0 -100px;
			
			background-size: cover;
			background-position: 50%;

			transform: skew(15deg);
		}
		
		&-body {
			position: relative;
			padding: 40px 80px;
		}
	}
}



/*ul {
	display: flex;
	flex-wrap: wrap;
	
	margin: 0;
	padding: 0;
	
	list-style: none;
	
	li {
		width: 33.33333%;
		height: 200px;
		
		box-sizing: border-box;
		position: relative;
		padding: 40px;
		
		&:nth-child(5n), &:nth-child(5n-1)  {
			width: 50%;
		}
		
		
		span {
			position: relative;
		}
		
		div {
			overflow: hidden;
			
			position: absolute;
			top: 0;		left: 0;
			bottom: 0;	right: 0;
			
			background: #ccc;
			outline: 2px solid #aaa;
			
			transform: skew(-15deg);
			
			img {
				display: block;
				
				position: absolute;
				top: 0;		left: 0;
				bottom: 0;	right: 0;
				
				transform: skew(15deg);
				
				object-fit: cover;
			}
		}
		
		&:nth-child(5n-1) div, &:nth-child(5n-4) div {
			left: -100px;
		}
		
		&:nth-child(5n) div, &:nth-child(5n-2) div {
			right: -100px;
		}
	}
}*/