JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<div class="swiper-container">
        <div class="swiper-wrapper">
            
            <div class="swiper-slide">
                 <div class="bg--pattern"></div>
                 
	            <div class="absolute c-card"><div class="card-content"><h2>Order Online Now!</h2><p>We are delighted to offer online ordering & delivery through Doordash and Caviar for all of our locations to make it even easier to satisfy your cravings.</p><a class="card-btn" href="#">Learn More</a></div></div>
                 <img src="https://images.unsplash.com/photo-1660836491055-9b2d8950a63c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3876&q=80">
                 
                 <div class="c--contrent-card">
	                 <div class="m-card-contents">
		                 <h2>Order Online Now!</h2>
	                 <p>We are delighted to offer online ordering & delivery through Doordash and Caviar for all of our locations to make it even easier to satisfy your cravings.</p>
                 </div> <!-- contrent-card -->
                 </div><!--  m-card -->
                 
                 </div> <!-- swiper slide -->
            <div class="swiper-slide" >
	            
	            <div class="absolute c-card"><div class="card-content"><h2>Travel Where You Want</h2><p>We’d love to have you join our team!  We are comprised of genuine people delivering genuine hospitality! Browse our open positions and join our a unique team made up of a terrific community!</p><a class="card-btn" href="#">Learn More</a></div></div>
	            
	            
                 <img src="https://images.unsplash.com/photo-1660893669101-841cc1b0aea3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3762&q=80">
    ...

CSS

html, body {
        position: relative;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
	.swiper-slide img {
		object-position: center;
		object-fit: cover;
		height: 600px;
		max-height: 600px;
		max-width: 80%;
		margin: 0 auto;
		display: block;
		position: relative;
		z-index: 1;
		margin-top: 3em;
	}
     
	img{
	  width:100%;
	}
	
	.c--contrent-card {
		max-width: 80%;
		width: 80%;
		margin: 0 auto;
		background-color: #ab9873;
		color: #fff;font-family: arial;
	}
	
	.m-card-contents {
		margin-top: 0;
		padding: 40px;
	}

	
	.absolute {
		position: absolute;
	}
		
	.c-card {
	    width: 600px;
	    background: #fff;
	    right: 0;
	    top: 20%;
	    max-height: 600px;
	    z-index: 2;
	}
			
	.card-content {
	    padding: 80px 60px;
	    font-family: arial;
	    display: flex;
	    flex-direction: column;
	    border: 1px solid #000
	}
	.card-content h2 {
	    font-family: arial;
	    font-size: 30px;
	    color: #000;
	    margin: 0;
	}
	.card-content p {
	    font-size: 20px;
	    color: #000;
	    display: block;
	    margin: 1em 0 2em;
	}
	.card-btn {
	    background-color: #ab9873;
	    color: #fff;
	    text-decoration: none;
	    padding: 20px 50px;
	    text-align: center;
	    max-width: 150px;
	}
	/* pattern */

	.bg--pattern {
	  	background-image: url(https://oceanprimestge.wpengine.com/wp-content/themes/ocean-prime/public/assets/images/cloth_pattern_small.jpg);
	  	background-repeat: repeat;
		position: absolute;
		z-index: -1;
		width: 35vw;
		 right: 44%;
		top: -9px;
		height: 45em;

	}


@media (min-width: 768px) {
  .c--contrent-card {
    display: none;
  }
}
	
	/* swiper overrides */
	
	.swiper-pagination-bullet-active {
		background: #ab9873 
	}

JavaScript

(function () {
  'use strict';
     var mySwiper = new Swiper('.swiper-container:not(#swiper1)', {
        // parameters
        loop: true,
        centeredSlides: true,
        pagination: '.swiper-pagination',
        // slides per view shows part of the prev and next
        slidesPerView: 1.49,
        spaceBetween: 1,
        // add more space between to add more space between slide
        navigation: {
           prevEl: '.slider .prev-btn',
           nextEl: '.slider .next-btn',
        },
        
        breakpoints: {
           1200: {
              slidesPerView: 'auto',
              spaceBetween: 40,
           },
           830: {
              slidesPerView: '1',
              spaceBetween: 100,
           }
        }
     });
})();

(function () {
  'use strict';
  const mySwiper = new Swiper('#swiper1', {
    loop: true,
	autoplay: 4000,
    slidesPerView: '1',
    centeredSlides: true,

    a11y: true,
    keyboardControl: true,
    grabCursor: true,

    // pagination
    pagination: '.swiper-pagination',
    paginationClickable: true,

    // navigation arrows
    nextButton: '#js-prev1',
    prevButton: '#js-next1' });

})();