JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">
        <div class="item active">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img...

CSS

@media (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
    }
}

.form {
    margin-top: 10%;
}
.search .form-section{
    background:rgba(0,0,0,1.6);
    border: 2px solid #414141;
    border-radius: 5px;
    padding: 10px;
}

div#carousel-example-generic {
    position:relative;
    height:100%;
}

div.search {
    position:absolute;
    z-index:999;
    top:60px; /* change to whatever you want */
    left:10px; /* change to whatever you want */
    right:auto; /* change to whatever you want */
    bottom:auto; /* change to whatever you want */
}

JavaScript

jQuery(document).ready(function() {
    $('.carousel').carousel({
        pause: "false",
        interval: 2000
    });

    $('.carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
    $('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
    $('.carousel-inner div.item img').each(function() {
        var imgSrc = $(this).attr('src');
        $(this).parent().css({'background': 'url('+imgSrc+') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '10%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover'});
        $(this).remove();
    });

    $(window).on('resize', function() {
        $('.carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
    });
});