JSFiddle - React, Tailwind, and code Playground

by Roman Ayapergenov

HTML

<div class="row">
	<div class="col-md-4">
		<h2>lorem ipsum</h2>
		<img src="http://showdogs.co.za/images/news.jpg" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos similique possimus aliquam, officiis asperiores magnam magni eveniet nihil?</p>
	</div>
	<div class="col-md-4">
		<h2>lorem ipsum</h2>
		<img src="http://showdogs.co.za/images/news.jpg" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos similique possimus aliquam, officiis asperiores magnam magni eveniet nihil?</p>
	</div>
	<div class="col-md-4">
		<h2>lorem ipsum</h2>
		<img src="http://showdogs.co.za/images/news.jpg" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos similique possimus aliquam, officiis asperiores magnam magni eveniet nihil?</p>
	</div>
	<div class="col-md-4">
		<h2>lorem ipsum</h2>
		<img src="http://showdogs.co.za/images/news.jpg" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos similique possimus aliquam, officiis asperiores magnam magni eveniet nihil?</p>
	</div>
	<div class="col-md-4">
		<h2>lorem ipsum</h2>
		<img src="http://showdogs.co.za/images/news.jpg" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos similique possimus aliquam, officiis asperiores magnam magni eveniet nihil?</p>
	</div>
	<div class="col-md-4">
		<h2>lorem ipsum</h2>
		<img src="http://showdogs.co.za/images/news.jpg" alt="">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos similique possimus aliquam, officiis asperiores magnam magni eveniet nihil?</p>
	</div>
</div>

CSS

.col-md-4 {
    float:left;
    width:210px;
    position:relative;
}
.col-md-4:after {
    content: '';
    position: absolute;
    bottom:0;
    width:97%;
    height:1px;
    background-color: blue;
}
.col-md-4:after:nth-last-child(-n+3) {
    background-color: white;
}