JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div class="slideshow-container">

    <a class="prev" onclick="plusSlides(-1)" style="border: 1px solid red;">
      <p class="arrow">&#10094;</p>
    </a>
    <a class="next" onclick="plusSlides(1)" style="border: 1px solid red;">
      <p class="arrow">&#10095;</p>
    </a>

    <div class="theslideshow">


      <div class="mySlides fade">
        <img class="container-image" src="https://i2.wp.com/metro.co.uk/wp-content/uploads/2015/11/party-snake.jpg?quality=90&strip=all&zoom=1&resize=644%2C427&ssl=1">
        <div class="container-text">
          <h2>Slide 1</h2>
          <p>"Cats like boxes because they are cryptic animals; they like to hide," Stephen Zawistowski, science adviser for the American Society for the Prevention of Cruelty to Animals, told Business Insider. "And a box gives them a place of safety and security."</p>
        </div>
      </div>

      <div class="mySlides fade">
        <img class="container-image" src="https://mtdata.ru/u7/photo53A0/20946911428-0/original.jpg#20946911428">
        <div class="container-text">
          <h2>Slide 2</h2>
          <p>"Cats like boxes because they are cryptic animals; they like to hide," Stephen Zawistowski, science adviser for the American Society for the Prevention of Cruelty to Animals, told Business Insider. "And a box gives them a place of safety and security."</p>
          <p>While inside a box, cats feel that they cannot be snuck up on from behind or the side — anything that wants to approach them must come directly into their field of vision. In effect, such hiding spaces allow them to watch the world around them without being seen.</p>
        </div>
      </div>

      <div class="mySlides fade">
        <img class="container-image" src="https://cdn0.wideopenpets.com/wp-content/uploads/2015/12/snake-in-hats-11feature-image-770x405.png">
        <div class="container-text">
          <h2>Slide 3</h2>
          <p>"Cats like boxes because they are cryptic animals; they like to...

CSS

body {
  background: gray;
}

* {
  box-sizing: border-box
}

.theslideshow {
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  border-radius: 15px;
  background: white;
}

/* Slideshow container */
.slideshow-container {
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 150px 1fr 150px;
  border: 1px solid blue;
  text-align: center;
  vertical-align: middle;
  border-radius: 15px;
  width: 100%;
  margin: 40px 20px 40px 20px;
}

.mySlides {
  display: none;
  padding: 40px;
}

/* Next & previous buttons */
.prev {
  grid-area: 1 / 1 / 4 / 1;
  color: white;
  font-weight: bold;
  font-size: 40px;
  opacity: 0.5;
  background: yellow;
  border-radius: 15px 0 0 15px;
  border: 1px solid red;
  left: 10%;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Position the "next button" to the right */
.next {
  grid-area: 4 / 4 / 1 / 3;
  color: white;
  font-weight: bold;
  font-size: 40px;
  opacity: 0.5;
  background: yellow;
  border-radius: 0 15px 15px 0;
  border: 1px solid red;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


.container-image {
  display: inline-block;
  vertical-align: center;
  width: 46%;
  margin: 20px 30px 0 0;

  @media (max-width: 620px) {
    width: 100%;
  }
}

.container-text {
  display: inline-block;
  vertical-align: center;
  width: 46%;

  @media (max-width: 620px) {
    width: 100%;
  }
}


.gallery {
  display: grid;
  grid-gap: 0.75rem;
  grid-auto-flow: dense;
  padding: 40px;
  list-style: none;
  background: white;
  width: 100%;
  box-sizing: border-box;
  margin: auto;
}

figure {
  background-size: cover;
  background-position: center center;
  border: 1px solid red;
  border-radius: 15px;
  width: 100%;
  padding-top: calc(84 / 168 * 100%);
  margin: auto;
  box-shadow: none;
}

figure:active {
  box-shadow: 0em 0em 0.5em...