JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<section class="info">
    <div class="container">
        <div class="swiper info__wrap">
            <div class="swiper-wrapper">
                <div class="info__item swiper-slide">
                    <picture class="info__image">
                        <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg" alt="">
                    </picture>
                    <div class="info__box">
                        <h3 class="info__title">title 2</h3>
                        <div class="info__text">
                            <p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis porro, possimus laborum alias soluta quibusdam quasi, mollitia voluptate itaque quisquam dolorem eius est officiis eos provident! Doloremque consectetur voluptas saepe.</p></p>
                        </div>
                       <a href="#" class="info__link">Подробнее</a>
                    </div>
                </div>
                <div class="info__item swiper-slide">
                    <picture class="info__image">
                        <img src="https://klike.net/uploads/posts/2019-01/1547365376_1.jpg" alt="">
                    </picture>
                    <div class="info__box">
                        <h3 class="info__title">title 2</h3>
                        <div class="info__text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis porro, possimus laborum alias soluta quibusdam quasi, mollitia voluptate itaque quisquam dolorem eius est officiis eos provident! Doloremque consectetur voluptas saepe.</p>
                        </div>
                       <a href="#" class="info__link">Подробнее</a>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div...

CSS

.info {
  margin: 40px 20px;
}

.info__item {
  position: relative;
}

.info__item:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.info__item:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}
.info__image {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
    overflow: hidden;
}

.info__box {
  position: relative;
  color: #fff;
  padding: 40px 50px;
}

.swiper-button-next, .swiper-button-prev {
  color: #fff;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

JavaScript

$(document).ready(function() {

  if (window.Swiper) {

    let info_swiper = new Swiper(".info__wrap", {
      slidesPerView: 1,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      allowTouchMove: true,
    });

  }

})