JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="s" id="s1" checked>
  <input type="radio" name="s" id="s2">
  <input type="radio" name="s" id="s3">
  
  <div class="demo">
    <div class="switch">
      <div class="slider"></div>
      <div class="btn btn1">
        <label for="s1">1</label>
        <a class="save" href="data:text/html,style=1 request sent" target="cookie">đź”’</a>
      </div>
      <div class="btn btn2">
        <label for="s2">2</label>
        <a class="save" href="data:text/html,style=2 request sent" target="cookie">đź”’</a>
      </div>
      <div class="btn btn3">
        <label for="s3">3</label>
        <a class="save" href="data:text/html,style=3 request sent" target="cookie">đź”’</a>
      </div>
    </div>
  </div>

  <iframe name="cookie" ></iframe>

CSS

body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: system-ui, sans-serif;
    }

    input { display: none; }

    .demo {
      width: 300px;
      height: 200px;
      border-radius: 12px;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Background colors */
    #s1:checked ~ .demo { background: #ff6b6b; }
    #s2:checked ~ .demo { background: #4ecdc4; }
    #s3:checked ~ .demo { background: #ffe66d; }

    .switch {
      position: relative;
      width: 180px;
      height: 60px;
      background: #fff;
      border-radius: 30px;
      display: flex;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .slider {
      position: absolute;
      width: 56px;
      height: 56px;
      background: #333;
      border-radius: 28px;
      top: 2px;
      transition: left 0.3s;
      pointer-events: none;
    }

    #s1:checked ~ .demo .slider { left: 2px; }
    #s2:checked ~ .demo .slider { left: 62px; }
    #s3:checked ~ .demo .slider { left: 122px; }

    .btn {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    label, .save {
      width: 100%;
      height: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #333;
      text-decoration: none;
    }

    .save { display: none; }

    /* Show save button when that option is checked */
    #s1:checked ~ .demo .btn1 label { display: none; }
    #s1:checked ~ .demo .btn1 .save { display: flex; }

    #s2:checked ~ .demo .btn2 label { display: none; }
    #s2:checked ~ .demo .btn2 .save { display: flex; }

    #s3:checked ~ .demo .btn3 label { display:...