JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="item active" style="background: url('https://dummyimage.com/200x200/000000/fff') center center no-repeat;">
    <div class="carousel-caption item-caption">
        <h5 class="text-black">200 TC Cotton Percale Duvet Cover</h5>
        <a href="#" class="link-inline">View Product<i class="fa fa-angle-right"></i></a>
    </div>
</div>

JavaScript

$(window).resize(function(){
var width = $(window).width();
if (width<800){
      $(".item").css({
       "background": "url('https://dummyimage.com/200x200/ff0000/000') center center no-repeat"
      });
   }
   else{
   $(".item").css({
       "background": "url('https://dummyimage.com/200x200/000000/fff') center center no-repeat"
      });
   }
});