JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://html.skoba.com.ua/js/responsiveslides.min.js"></script>
<link rel="stylesheet" href="http://html.skoba.com.ua/css/style.css">
<div class="wrapper">
	<section class="promo-block">
		<div class="widget-left">
			<a href="#" class="widget-left-top">
				<img src="http://placehold.it/283x900" alt="Название статьи"><!-- Размер фото 283х329 -->
			</a>
			<a href="#" class="widget-left-bottom">Вкусные статьи</a>
		</div>
		<div class="widget-slider">
			<ul class="rslides">
				<li><img src="http://placehold.it/350x350" alt="rslides"></li>
				<li><img src="http://placehold.it/350x150" alt="rslides"></li>
				<li><img src="http://placehold.it/350x250" alt="rslides"></li>
			</ul>
		</div>
		<div class="widget-right">
			<a href="#" class="widget-right-top">Как сделать заказ</a>
			<a href="#" class="widget-right-bottom"><img src="http://placehold.it/250x900" alt="Как мы готовим"></a>
		</div>
	</section>
</div>

CSS

.promo-block {
    height: 533px;
    overflow: hidden;
}

.widget-slider, .rslides, .rslides li  {
    height: 533px !important;
}

.rslides li img {
    object-fit: cover;
    height: 533px;
}

JavaScript

$(function() {
    $(".rslides").responsiveSlides();
  });