JSFiddle - React, Tailwind, and code Playground

HTML

<p class="one btnall"> Text1 </p>
<p class="two btnall">Text2 </p>
<p class="three btnall"> Text 3 </p>
        <br>
        <a href="#" class="btn1">Button 1</a>
             <br>
            <br>
        <a href="#" class="btn2">Button 2</a>
<br>
                <br>
        <a href="#" class="btn3">Button 3</a>

CSS

.btn1 {
  background: #40b3ff;
  background-image: -webkit-linear-gradient(top, #40b3ff, #2980b9);
  background-image: -moz-linear-gradient(top, #40b3ff, #2980b9);
  background-image: -ms-linear-gradient(top, #40b3ff, #2980b9);
  background-image: -o-linear-gradient(top, #40b3ff, #2980b9);
  background-image: linear-gradient(to bottom, #40b3ff, #2980b9);
  -webkit-border-radius: 30;
  -moz-border-radius: 30;
  border-radius: 30px;
  text-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #47ff2b;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn1:hover {
  background: #9ea2fa;
  background-image: -webkit-linear-gradient(top, #9ea2fa, #4844c2);
  background-image: -moz-linear-gradient(top, #9ea2fa, #4844c2);
  background-image: -ms-linear-gradient(top, #9ea2fa, #4844c2);
  background-image: -o-linear-gradient(top, #9ea2fa, #4844c2);
  background-image: linear-gradient(to bottom, #9ea2fa, #4844c2);
  text-decoration: none;
}
.btn2 {
  background: #40b3ff;
  background-image: -webkit-linear-gradient(top, #40b3ff, #2980b9);
  background-image: -moz-linear-gradient(top, #40b3ff, #2980b9);
  background-image: -ms-linear-gradient(top, #40b3ff, #2980b9);
  background-image: -o-linear-gradient(top, #40b3ff, #2980b9);
  background-image: linear-gradient(to bottom, #40b3ff, #2980b9);
  -webkit-border-radius: 30;
  -moz-border-radius: 30;
  border-radius: 30px;
  text-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #47ff2b;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn2:hover {
  background: #9ea2fa;
  background-image: -webkit-linear-gradient(top, #9ea2fa, #4844c2);
  background-image: -moz-linear-gradient(top, #9ea2fa, #4844c2);
  background-image:...

JavaScript

$('.one').hide();
$('.two').hide();
$('.three').hide();
$('.btnall').hide();
$('.btn1').click(function () {
    $.when($('.btnall').fadeOut()).done(function(){
    $('.one').fadeIn();
   });
});

$('.btn2').click(function () {
    $.when($('.btnall').fadeOut()).done(function(){
         $('.two').fadeIn();
    });
   

});

$('.btn3').click(function () {
   $.when($('.btnall').fadeOut()).done(function(){
    $('.three').fadeIn();
   });
});