JSFiddle - React, Tailwind, and code Playground

by dhaval_123

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 hour" data-reactid="21">12</span>
                                <span class="amount month" 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 hour" data-reactid="21">15</span>
                                <span class="amount month" 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

if($(".hourly").find("active").html() == "Monthly Pricing"){
		hideHours();
}else {
	 hideMonth();
}
$('button').click(function() {
	    $('button').removeClass('active');
	    $(this).addClass('active');
      if($(this).html() == "Monthly Pricing"){
      	hideHours();
      }else {
      	hideMonth();
      }
     });
     
 function hideMonth(){
 		$("span.hour").each(function(e){
        	$(this).css("display","inline");
        });
        $("span.month").each(function(e){
        	$(this).css("display","none");
        });
 }
 
 function hideHours(){
  $("span.hour").each(function(e){
    $(this).css("display","none");
  });
   $("span.month").each(function(e){
     $(this).css("display","inline");
   });
 }