JSFiddle - React, Tailwind, and code Playground

by gabbymarley

HTML

<!DOCTYPE html>
<html>
<head>
<title>Swipe Button</title>

</head>
<body id="outsideclick">

	<label class="toggle-label toggler touchable_swipe_mobile" id="toggle">
		<input id="rdb1" type="checkbox" name="toggler" checked="true"/>
		<span class='back'>
			<span class='toggle'></span>
			<span class='label on'>Complimentary Activities</span>  
			<span class='label off'>Exclusive Offers</span>
		</span>
	</label>

	<div id="blk-1" class="toHide">
		Content One
	</div>

	<div id="blk-2" class="toHide" style="display:none">
		Content Two
	</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>

  
<script>
jQuery(function() {
	jQuery("[name=toggler]").click(function() {
		  jQuery('.toHide').hide();
		  var toShow = $(this).is(":checked") ? "blk-1" : "blk-2";
		  jQuery("#" + toShow).toggle(1);
	});
});

	$( ".touchable_swipe_mobile" ).on( "swipeleft", swipeleftHandler );
	$( ".touchable_swipe_mobile" ).on( "swiperight", swiperightHandler );
 
  // Callback function references the event target and adds the 'swipeleft' class to it
  function swipeleftHandler( event ){
  event.stopImmediatePropagation();
    event.preventDefault();
	$('#blk-1').show();
	$('#blk-2').hide();
	$(".toggle").removeClass("toggle_left_cls");
	$(".toggle").addClass("toggle_right_cls");
	var checkBoxes = $("input[name=toggler]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
  }
  
  // Callback function references the event target and adds the 'swiperight' class to it
  function swiperightHandler( event ){
	event.stopImmediatePropagation();
    event.preventDefault();
	$('#blk-1').hide();
	$('#blk-2').show();
	$(".toggle").removeClass("toggle_right_cls");
	$(".toggle").addClass("toggle_left_cls");
	var checkBoxes = $("input[name=toggler]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
  }
  

$( document...

CSS

<style>
	
		#toggle{
			margin-top:100px;
		}
		
		/*Toggle*/
		.toggle-label {
		  position: relative;
		  display: block;
		  width: 300px;
		  height: 40px;
		  /*border: 1px solid #808080;
			*/
		  margin: 0 auto;
		  border-radius: 20px;
		  box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
		  -webkit-box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
		  -moz-box-shadow: 5px 6px 9px -5px rgba(0, 0, 0, 0.63);
		}

		.toggle-label input[type=checkbox] {
		  opacity: 0;
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  border-radius: 20px;
		}

		.toggle-label input[type=checkbox]+.back {
		  position: absolute;
		  width: 100%;
		  height: 100%;
		  background: #f4f1f0;
		  /*green*/
		  transition: background 150ms linear;
		  border-radius: 20px;
		}

		.toggle-label input[type=checkbox]:checked+.back {
		  background: #f4f1f0;
		  /*orange*/
		}

		.toggle-label input[type=checkbox]+.back .toggle {
		  display: block;
		  position: absolute;
		  content: ' ';
		  width: 50%;
		  height: 100%;
		  transition: margin 150ms linear;
		  /* border: 1px solid #808080;
			*/
		  border-radius: 20px;
		  margin-top: 0px;
		  margin-left: 150px;
		  background: #f26922;
		}

		/*inside toggle */
		.toggle-label input[type=checkbox]:checked+.back .toggle {
		  margin-left: 2px;
		  margin-top: 0px;
		  background-color: #f26922;
		}

		.toggle-label .label {
		  display: block;
		  position: absolute;
		  width: 50%;
		  color: #9fa1a4;
		  text-align: center;
		  font-size: 16px;
		  margin-top: 0px !important;
		}

		.toggle-label .label.on {
		  left: 0px;
		  top:10px;
		  font-family: "Acumin Pro ExtraCondensed", Arial, sans-serif;
		  
		}

		.toggle-label .label.off {
		  right: 0px;
		  top:10px;
		  font-family: "Acumin Pro ExtraCondensed", Arial, sans-serif;
			
		}

		.toggle-label input[type=checkbox]:checked+.back .label.on {
		  color: #fff;
		}

		.toggle-label input[type=checkbox]+.back .label.off {
		  color: #fff;
		}

		.toggle-label...