JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.carwahi.com/css/style.css">
<link rel="stylesheet" href="http://www.carwahi.com/css/swiper.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.carwahi.com/css/swiper.min.js"></script>
<div class="swiper-container">
				
				<div class="swiper-wrapper">
				
				
						<div class="swiper-slide" style="width: 360px; height: 250px;">											
						<div class="containerhero2">

							<a href="Diary/Tata Respect"><img src="http://www.carwahi.com/Cars Images/Tata-Motors.jpg" height=250 width=360 style="object-fit: cover;"></a>
							<div class="content"><b>Respect to Tata Motors 5-star safety</b></div>
						</div>
						</div>
				
				
						<div class="swiper-slide" style="width: 360px; height: 250px;">											
						<div class="containerhero2">

							<a href="News/Bike News/Arc Vector"><img src="http://www.carwahi.com/Bikes Images/Arc-Vector-5.jpg" height=250 width=360 style="object-fit: cover;"></a>
							<div class="content"><b>Arc Vector -Fastest electric bike</b></div>
						</div>
						</div>
								
						
						<div class="swiper-slide" style="width: 360px; height: 250px;">											
						<div class="containerhero2">

							<a href="News/Car News/Nexa Upgrade"><img src="http://www.carwahi.com/Cars%20Images/Maruti-Nexa-1.jpg" height=250 width=360 style="object-fit: cover;"></a>
							<div class="content"><b>NEXA to get modern amenities</b></div>
						</div>
						</div>
				
				
						<div class="swiper-slide" style="width: 360px; height: 250px;">											
						<div class="containerhero2">

							<a href="Reviews\Cars\Ford Freestyle"><img src="http://www.carwahi.com/Cars%20Images/Ford-Freestyle-3.jpg" height=250 width=360 style="object-fit: cover;"></a>
							<div class="content"><b>Ford Freeestyle Review</b></div>
						</div>
						</div>
				
				
						<div class="swiper-slide" style="width: 360px; height:...

CSS

.containerhero2 {
  max-width: 100%;
}

.containerhero2 img {
  width: 100%;
}

.containerhero2 .content {
  width: calc(100% - 40px);
}

JavaScript

var swiper = new Swiper('.swiper-container', {
      				slidesPerView: 3,
      				spaceBetween: 30,
      				autoplay: {
        			delay: 2500,
       				disableOnInteraction: false,
      				},
      				pagination: {
        			el: '.swiper-pagination',
        			clickable: true,
     		 		},
     		 		navigation: {
        			nextEl: '.swiper-button-next',
        			prevEl: '.swiper-button-prev',
     			 	},
            breakpoints: {
            // when window width is <= 320px
            320: {
              slidesPerView: 1,
              spaceBetween: 10
            },
            // when window width is <= 480px
            480: {
              slidesPerView: 1,
              spaceBetween: 20
            },
            // when window width is <= 640px
            640: {
              slidesPerView: 2,
              spaceBetween: 30
            }
          }
     			
    			});