JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="portfolio-slider">
						<li>
							<a class="portfolio-item" hidefocus="true" style="top: -300px; left: -300px;">
								<img src="img/img_1.jpg" alt="">
								<div class="cover" data-img-src="img/img_1.jpg">
									<div class="text">Дизайн сайта для компании "Nidec"</div>
								</div>
							</a>
							<a href="" class="portfolio-item" hidefocus="true" style="top: 300px; left: -300px;">
								<img src="img/img_4.jpg" alt="">
								<div class="cover">
									<div class="text">Дизайн сайта для компании "Nidec"</div>
								</div>
							</a>
						</li>
						<li>
							<a href="" class="portfolio-item" hidefocus="true" style="top: -300px;">
								<img src="img/img_2.jpg" alt="">
								<div class="cover">
									<div class="text">Дизайн сайта для компании "Nidec"</div>
								</div>
							</a>
							<a href="" class="portfolio-item" hidefocus="true" style="top: 300px;">
								<img src="img/img_5.jpg" alt="">
								<div class="cover">
									<div class="text">Дизайн сайта для компании "Nidec"</div>
								</div>
							</a>
						</li>
						<li>
							<a href="" class="portfolio-item" hidefocus="true" style="top: -300px; right: -300px;">
								<img src="img/img_3.jpg" alt="">
								<div class="cover">
									<div class="text">Дизайн сайта для компании "Nidec"</div>
								</div>
							</a>
							<a href="" class="portfolio-item" hidefocus="true" style="top: 300px; right: -300px;">
								<img src="img/img_6.jpg" alt="">
								<div class="cover">
									<div class="text">Дизайн сайта для компании "Nidec"</div>
								</div>
							</a>
						</li>
						
						<li>
							<a href="" class="portfolio-item" hidefocus="true">
								<img src="img/img_1.jpg" alt="">
								<div class="cover lightbox-trigger" data-img-src="img/img_1.jpg">
									<div class="text">Дизайн сайта для компании "Nidec"</div>
								</div>
							</a>
							<a href="" class="portfolio-item" hidefocus="true">
								<img...

JavaScript

$('.portfolio-slider li:nth-child(1n)').find('a').first().css({'top' : '-300px', 'left' : '-300px'});
	$('.portfolio-slider li:nth-child(1n)').find('a').eq(1).css({'top' : '300px', 'left' : '-300px'});
	
	$('.portfolio-slider li:nth-child(2n)').find('a').first().css({'top' : '-300px'});
	$('.portfolio-slider li:nth-child(2n)').find('a').eq(1).css({'top' : '300px'});
	
	$('.portfolio-slider li:nth-child(3n)').find('a').first().css({'top' : '-300px', 'right' : '-300px'});
	$('.portfolio-slider li:nth-child(3n)').find('a').eq(1).css({'top' : '300px', 'right' : '-300px'});