JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<ul class="deck-a">
	<li>
		<a href=""><img src="https://fillmurray.com/640/360"/></a>
		<a href="">Nothing Lasts Forever</a>
	</li>
	<li>
		<a href=""><img src="https://fillmurray.com/320/180"/></a>
		<a href="">The Man Who Knew Too Little</a>
	</li>
	<li>
		<a href=""><img src="https://fillmurray.com/480/270"/></a>
		<a href="">A Glimpse Inside the Mind of Charles Swan III</a>
	</li>
</ul>

CSS

:root {
	
	--clearfix: {
		content: "";
		display: block;
		clear: both;
	}
	
	--teaser-list: {
		margin: 0;
		padding: 0;
	};
	
	--teaser-list-item: {
		display: block;
		float: left;
		margin: 10px;
		list-style: none;
	};
	
	--item-image: {
		display: block;
		width: 100%;
		height: auto;
	};
	
	--span-2: {
		width: 16.6666666666%;	
	};
	
	--span-3: {
		width: 25%;	
	};
	
	--span-4: {
		width: 33.3333333333%;	
	};
	
	--span-6: {
		width: 50%;	
	};
	
	--span-8: {
		width: 66.6666666666%;	
	};
	
	--span-9: {
		width: 75%;	
	};
	
	--span-10: {
		width: 83.3333333333%;	
	};
	
	--span-12: {
		width: 100%;	
	};
}


.deck-a {
	@apply --teaser-list;
		padding: 0;
}

.deck-a:after {
	@apply --clearfix;
		content: "";
		display: block;
		clear: both;
}
	
.deck-a li {
	@apply --teaser-list-item;
}

.deck-a > :nth-child(1) {
	@apply --span-8;
}

.deck-a > :nth-child(2), .deck-a > :nth-child(3) {
	@apply --span-3;
}

.deck-a li img {
	@apply --item-image;
}