JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
<a href="#" class="prev">anterior</a>

     <div class="representante-info">
        <div id="#rep-info" class="texto">
           <ul>
              <li><h2>foo LTDA</h2></li>
              <li>End: Alameda dos Anjos 233, São Caetano do Sul - SP</li>
              <li>Cep: 1234-000</li>
              <li>Fone: (11) 1234-0000</li>
              <li>Site: www.foo.com.br</li>
              <li>E-mail: [email protected]</li>
           </ul>
           <ul class="hidden">
           	<li><h2>FOO LTDA</h2></li>
           	<li>End: Rua do Bosque, 222, São Paulo - SP</li>
           	<li>Cep: 1234-000</li>
           	<li>Fone: (19) 8845-9897</li>
           	<li>Site: www.foo.com.br</li>
           	<li>E-mail: [email protected]</li>
           </ul>
           <ul class="hidden">
           	<li><h2>Jhon Doe</h2></li>
           	<li>Rua Plesk, 400 São paulo - SP</li>
           	<li>Cep: 1234-000</li>
           </ul>
        </div>
     </div>
     <!-- /.representante-info -->

     <a href="#" class="next">proximo</a>
</div>

CSS

.content {
  width: auto;
  height: 750px;
  margin: 0 auto;
}

.content a.prev,
 a.next {
  float: left;
  display: block;
  width: 31px;
  height: 27px;  
  color: #f26;
  position: relative;
}

.content a.prev {
  background-image: url(../assets/img/setas.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  top: 50px;
  margin: 0 10px 0 0;
}

.content a.next {
  background-image: url(../assets/img/setas.png);
  background-repeat: no-repeat;
  background-position: 0 -27px;
  top: 50px;
  margin: 0 0 0 10px;
}

 .content .representante-mapa {
  width: 850px;
  height: 560px;
}

 .content .representante-info {
  width: 650px;
  height: 134px;
  background-color: #df6225;
  background-image: url(../assets/img/rep-map-info.png);
  background-position: -1% 50%;
  background-repeat: no-repeat;
  margin: 0 auto;
  float: left;
}

.content .representante-info .texto {
  width: 328px;
  height: 100%;
  margin: 0 0 0 60px;
}

.content .representante-info .texto ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 20px;
}

.content .representante-info .texto ul.hidden {
  display: none;
}

.content .representante-info .texto ul li {
  font-family: 'helvetica neue', arial, sans-serif;
  font-size: 14px;
  color: #fff;
}

.content .representante-info .texto ul li h2 {
  font-family: arial, serif;
  text-transform: uppercase;
  font-size: 16px;
  color: #fff;
  padding: 0;
  margin: 0;
}