JSFiddle - React, Tailwind, and code Playground

by sp_true

HTML

<div style="display: inline-flex; justify-content: space-around; width: 100%">
  <div class="js-toggle-slide">
    <button class="switch-button">
      <span class="switch-button__circle"></span>
    </button>

    <!-- Code -->
    <div class="type">
      <br />
      <span class="active">"SecurityQuestions": [</span><br />
      <span class="active">{</span><br />
      <span class="active">"Question": "Your claim number",</span><br />
      <span class="active">"Answer": "3453"</span><br />
      <span class="active">}</span><br />
      <span class="active">{</span><br />
      <span class="active">"Question": "The last 4-digits</span><br />
      <span class="active">of your SSN number",</span><br />
      <span class="active">"Answer": "0021"</span><br />
      <span class="active">}</span><br />
      <span class="active">{</span><br />
      <span class="active">"Question": "Your mailing zip code",</span><br />
      <span class="active">"Answer": "75247"</span><br />
      <span class="active">}</span><br />
      <span class="active">],</span>
    </div>
  </div>

  <div class="js-toggle-slide">
    <button class="switch-button">
      <span class="switch-button__circle"></span>
    </button>

    <!-- Code -->
    <div class="type">
      <br />
      <span class="active">"SecurityQuestions": [</span><br />
      <span class="active">{</span><br />
      <span class="active">"Question": "Your claim number",</span><br />
      <span class="active">"Answer": "3453"</span><br />
      <span class="active">}</span><br />
      <span class="active">{</span><br />
      <span class="active">"Question": "The last 4-digits</span><br />
      <span class="active">of your SSN number",</span><br />
      <span class="active">"Answer": "0021"</span><br />
      <span class="active">}</span><br />
      <span class="active">{</span><br />
      <span class="active">"Question": "Your mailing zip code",</span><br />
      <span class="active">"Answer":...

CSS

.switch-button {
  display: inline-flex;
  width: 2.75rem;
  height: 1.5rem;
  border: 0;
  background: #E5E7EB;
  border-radius: 12px;
  padding: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.switch-button__circle {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  border-radius: 12px;
  width: 1.25rem;
  height: 1.25rem;
  background: #FFFFFF;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
  display: inline-block;
  border: 2px solid transparent;
/*   margin-top: 2px;
  margin-left: 1px; */
}

.switch-button.active .switch-button__circle {
  transform: translateX(1.25rem);
}

JavaScript

const rules = [
  ['3453', '74b752ee91f682d9314308e81e0ba661f99468f40f00a68825b78f56c00f4ed'],
  ['0021', 'eaf008bfd91cc2b81eff6e922d2291ef75ddaecef0a5e72c0b6d7f9194fb41fc'],
  ['75247', 'dea63197e399920ee9f7b69d8067d4910fe3748631e0049cc7b2edd3d2cf7ab9'],
];

document.querySelector('.switch-button').addEventListener('click', function() {
  const state = this.classList.toggle('active');
  document.querySelector('.type').classList.toggle('swap');
  replace(state, rules);
});

function replace(state, rules) {
  const activeNodes = Array.from(document.querySelectorAll('span.active'));
  rules.forEach(function(rule) {
    const searchStr = rule[+!state];
    const replacement = rule[+state];
    const currNode = activeNodes.find(node => node.textContent.includes(searchStr));
    currNode.textContent = currNode.textContent.replace(searchStr, replacement);
  });
}