Flip-Disc Checkbox

<div class="main-container-styles">
  <div class="flipdisc-list-wrapper">
    <div class="list-title">System Diagnostics</div>

    <label class="flipdisc-item-label" for="diag1">
      <input
        class="hidden-checkbox-input"
        type="checkbox"
        id="diag1"
        checked=""
      />
      <div class="visual-flipdisc-container">
        <div class="flipdisc-flipper">
          <div class="flipdisc-front">
            <svg
              class="front-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
              ></path>
            </svg>
          </div>
          <div class="flipdisc-back">
            <svg
              class="back-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M4.5 12.75l6 6 9-13.5"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <span class="flipdisc-text-content">Memory Test</span>
    </label>

    <label class="flipdisc-item-label" for="diag2">
      <input class="hidden-checkbox-input" type="checkbox" id="diag2" />
      <div class="visual-flipdisc-container">
        <div class="flipdisc-flipper">
          <div class="flipdisc-front">
            <svg
              class="front-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
              ></path>
            </svg>
          </div>
          <div class="flipdisc-back">
            <svg
              class="back-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M4.5 12.75l6 6 9-13.5"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <span class="flipdisc-text-content">Disk Integrity Check</span>
    </label>

    <label class="flipdisc-item-label" for="diag3">
      <input class="hidden-checkbox-input" type="checkbox" id="diag3" />
      <div class="visual-flipdisc-container">
        <div class="flipdisc-flipper">
          <div class="flipdisc-front">
            <svg
              class="front-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
              ></path>
            </svg>
          </div>
          <div class="flipdisc-back">
            <svg
              class="back-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M4.5 12.75l6 6 9-13.5"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <span class="flipdisc-text-content">Network Analysis</span>
    </label>
  </div>
</div>