JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="hourly">                          		
						<button class="hourlypricing active">Hourly Pricing</button>
						<span class="FyfR" data-reactid="5">or</span>
						<button class="monthlypricing">Monthly Pricing</button>
											
				</div>
				<div class="col-md-4 beginner">
				<div class="plan-card__card-wrapper">
					<header class="plan-card__header">
						<h3 class="plan-card__name">Beginner</h3>
					</header>
					<div class="plan-card__body">
						<div class="_196p" data-reactid="18">
							<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
								<span class="_dollar" data-reactid="20">$</span>
								<span class="amount hourly_rate" data-reactid="21">12</span>
                                <span class="amount monthly_rate" data-reactid="21" >1999</span>
								<span class="hour" data-reactid="23">/ hour</span>
                               <span class="month" data-reactid="23">/ month</span>
							</div>
						</div>
					</div>	                    		
				</div>
    </div>
				<div class="col-md-4 pro">
				<div class="plan-card__card-wrapper">
					<header class="plan-card__header">
						<h3 class="plan-card__name">Pro</h3>
					</header>	
                    <div class="plan-card__body">
						<div class="_196p" data-reactid="18">
							<div style="transform:translateY(0rem);opacity:1;" class="" data-reactid="19">
								<span class="dollar" data-reactid="20">$</span>
								<span class="amount hourly_rate" data-reactid="21">15</span>
                                <span class="amount monthly_rate" data-reactid="21"  >2499</span>
								<span class="hour" data-reactid="23">/ hour</span>
                                <span class="month" data-reactid="23">/ month</span>
							</div>
						</div>
					</div>                    						
				</div>
				</div>	
    <div class="col-md-4 ninja">
				<div...

CSS

button.active {
  background: #57c1e8 !important;
  color:#fff;
}

button:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #57c1e8;
  transition: transform 1s;
  transform-origin: bottom center;
  transform: scaleY(0);
  z-index: -1;
  color:#fff;
}

button:hover:after {
  transform: scaleY(1);
  color:#fff;
}

button.active:hover:after {
  transform: scaleY(0);
}

button {
  background: #fff;
  border: .2rem solid #57c1e8;
  min-width: 16.5rem;
  display: inline-block;
  text-align: center;
  height: 6rem;
  line-height: 5.6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  font-size: 1.4rem;
  padding: 0 2.5rem;
  font-weight: 700;
  cursor: pointer;
  color: #57c1e8;
  text-decoration: none !important;
  -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
  transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
  position: relative;
  z-index: 1;
}

button.monthlypricing {
  margin-left: 50px;
}

button.hourlypricing {
  margin-left: 265px;
}

JavaScript

$(document).ready(function() {
  $(".monthly_rate, .month").hide();
  console.log("abc");
  
  $('button').on('click', function() {
        $('button').removeClass('active');
        $(this).addClass('active');
        
        if ($(this).prop("class") == "monthlypricing active") {
        	$(".monthly_rate, .month").show();
          $(".hourly_rate, .hour").hide();
        } else if ($(this).prop("class") == "hourlypricing active") {
        	$(".monthly_rate, .month").hide();
          $(".hourly_rate, .hour").show();
        }
       
  });

});