JSFiddle - React, Tailwind, and code Playground

HTML

<div id="arrow-left" class="arrow">Esquerda</div>
<div id="slider">
  <table width="95%" align="center" id="servico1" class="slide">
    <tr>
      <td width="50%" bgcolor="#f2ebe1" height="90">
        <div style="padding-left: 20px;">
          <p>TEXTO TABELA 1</p>
          <h1>
            TEXTO
          </h1>
          <hr>
          <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
          </ul>
        </div>
      </td>
      //aqui fica a imagem
      <td width="50%" height="90">
        <div class="slide1">
          <div class="slide-content">
          </div>
        </div>
      </td>
    </tr>
  </table>
  <table width="95%" align="center" id="servico2" class="slide">
    <tr>
      <td width="50%" bgcolor="#f2ebe1" height="90">
        <div style="padding-left: 20px;">
          <p>TEXTO TABELA 2</p>
        </div>
      </td>
      <td width="50%">
        //Aqui fica a segunda imagem
        <div class="slide2">
          <div class="slide-content">
            <span>Imagem dois</span>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
<div id="arrow-right" class="arrow">Direita</div>

JavaScript

let sliderImages = document.querySelectorAll(".slide"),
    arrowLeft = document.querySelector("#arrow-left"),
    arrowRight = document.querySelector("#arrow-right"),
    current = 0;

    // Limpar todas as imagens
    function reset() {
        for (let i = 0; i < sliderImages.length; i++) {
            sliderImages[i].style.display = "none";
        }
    }

    // Init slider
    function startSlide() {
        reset();
        sliderImages[current].style.display = "block";
    }

    //Mostrar anterior
    function slideLeft() {
        reset();
        if (current > 0) {
        		current--;
        }
        sliderImages[current].style.display = "block";
    }

    // Mostrar seguinte
    function slideRight() {
        reset();
        if (current < sliderImages.length) {
        	current++;
        }
        
        sliderImages[current].style.display = "block";
    }

    // esquerda seta click
    arrowLeft.addEventListener("click", function() {
        
        slideLeft();
    });

    // direita seta click
    arrowRight.addEventListener("click", function() {
        
        slideRight();
    });

    startSlide();