JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<hr>
<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<hr>
<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.main {
    width: 360px;
    text-align: center;
}
.main>div {
    display:inline-block;
    vertical-align:top;
    width: 100px;
    height: 100px;
    background:red;
    margin-top: 10px;
    margin-bottom: 10px;
}
.main>div:nth-child(3n+2) {
    margin-left: 20px;
    margin-right: 20px;
}

.active-borders{
    border-left: 5px solid black;
    border-right: 5px solid black;
}

.active-border{
    border-right: 5px solid black;
}

JavaScript

$('.main').each(function(){

	var div_length = $(this).find('div').length;

	if((div_length % 3) === 0){
		div_last_items = div_length;
	}

	else if((div_length % 3) === 1){
		div_last_items = div_length - 1;
		$(this).find('div:nth-last-child(1)').addClass('active-borders');
	}

	else if((div_length % 3) === 2){
		div_last_items = div_length - 2;
		$(this).find('div:nth-last-child(2)').addClass('active-border');
	}

	$(this).find('div:lt('+div_last_items+')').each(function(i){
		i=i+2;
		if(i % 3 === 0){
			$(this).addClass('active-borders')	
		}		
	});
});