JSFiddle - React, Tailwind, and code Playground

by chris lindquist

HTML

<div>
  <div>
    <a href="" class="boton-alex">
      ¡Quiero un fiestón!
    </a>
  </div>
  <div>
    <a href="" class="boton-exel">
      Me gusta la fiesta
    </a>
  </div>
  <div>
    <a href="" class="boton-py">
      Tengo poco presupuesto
    </a>
  </div>
</div>
<div id="wrapper">
  <div id="div-alex" class="swap">
    <div class="central alex">
      <h2>Alex Muñoz</h2>
      <h3>«Para nosotros la fiesta es uno de los puntos vitales y más importantes, tenemos un buen presupuesto reservado para ello.»</h3>
      <p>Alex Muñoz, como fundador de Exel Eventos, cuenta con una dilatada experiencia en bodas. Además, es técnico de sonido e iluminación, trata cada boda como una obra de arte única e irrepetible. ¡Está deseando conocerte!</p>
    </div>
  </div>
  <div id="div-exel" class="swap">
    <div class="central exel">
      <h2>Exel DJs</h2>
      <h3>«Le doy mucha <span style="text-decoration: underline;">importancia a la fiesta de mi boda</span><br>
        <span style="text-decoration: underline;">y tengo</span> presupuesto reservado para esta parte de la boda.»</h3>
      <p>Exel Djs es tu mejor opción: DJs animadores que saldrán a la pista si la fiesta sufre uno o varios bajones, y lo más importante… contarás con DJs experimentados y podrás conocerles desde el mismo momento de la contratación, aunque quede más de un año para tu boda. Además, podrás elegir entre distintos paquetes de iluminación para la fiesta.</p>
    </div>
  </div>
  <div id="div-py" class="swap">
    <div class="central ys">
      <h2>Play Yourself</h2>
      <h3>«Tengo muy poco presupuesto y no me importa contar con un buen DJ, le daré una Playlist o incluso me vale con el equipo alquilado.»</h3>
      <p>Play Yourself es tu mejor solución, puedes alquilarlo sin DJ o contar con un DJ tradicional NO Animador.</p>
    </div>
  </div>
</div>
<div class="lowercontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...

CSS

html {
  scroll-behavior: smooth;
}

#wrapper {
  position: relative;
}

.swap {
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
}

.swap>div {
  width: 60%;
  margin: 0 auto;
}

.lowercontent {
  margin-top: 200px;
  font-size: 1.2em;
}

JavaScript

$(document).ready(function() {
	var elmnt = document.getElementById("scroll");
  $('.boton-alex').click(function(e) {
    e.preventDefault();
    $("#div-alex").fadeTo(600, 1.0);
    $('#div-exel').fadeTo(600, 0);
	elmnt.scrollIntoView();
  });
  $('.boton-exel').click(function(e) {
    e.preventDefault();
    $("#div-exel").fadeTo(600, 1.0);
    $('#div-alex').fadeTo(600, 0);
    $('#div-py').fadeTo(600, 0);
	elmnt.scrollIntoView();
  });
  $('.boton-py').click(function(e) {
    e.preventDefault();
    $("#div-py").fadeTo(600, 1.0);
    $('#div-exel').fadeTo(600, 0);
    $('#div-alex').fadeTo(600, 0);
	elmnt.scrollIntoView();
  });
});