JSFiddle - React, Tailwind, and code Playground

HTML

<header class="swiper-container">
      <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="slide" src="https://cranmoremtlodge.files.wordpress.com/2008/09/fall-foliage-003.jpg" />
            </div>
    </header>

CSS

html, body { height: 100%; } /* NEW */

.swiper-container {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 100%; /* NEW */
}

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}

.swiper-slide {
  width: 1664px;
	position:relative;
  padding-bottom:44%;
  overflow: hidden;
  height: 100%; /* NEW */
  width: 100%;
}

.swiper-slide .slide {
  width: 100%;
  height: auto;
  background: teal;
}