JSFiddle - React, Tailwind, and code Playground

by Patrick Ludewig

HTML

<div class="flex flex-col gap-2 lg:gap-3 mt-6">
  <div class="country-language-selector__option-item">
    <input
      type="radio"
      name="country_code"
      id="country-DE"
      value="DE"
      class="hidden peer/country"
    />
    <label
      for="country-DE"
      class="country-language-selector__option-label bg-grey-100 hover:bg-grey-200 peer-checked/country:bg-celtic-green peer-checked/country:hover:bg-celtic-green flex gap-2 peer-checked/country:before:bg-celtic-green"
    >
      <span
        class="flag rounded-md flag rounded-md overflow-hidden flex justify-center align-center w-8 h-6 overflow-hidden"
      >
        <img
          src="//cdn.shopify.com/static/images/flags/de.svg?width=32"
          alt="Deutschland"
          srcset="//cdn.shopify.com/static/images/flags/de.svg?width=32 32w"
          width="32"
          height="24"
        />
      </span>
      <span
        class="country-language-selector__option-text peer-checked/country:text-white"
        >Deutschland</span
      >
    </label>
    <span
      class="country-language-selector__check-icon hidden peer-checked/country:inline"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        aria-hidden="true"
        class="icon icon-checkmark h-4 w-4"
        viewBox="0 0 12 9"
      >
        <path
          fill="currentColor"
          fill-rule="evenodd"
          d="M11.35.643a.5.5 0 0 1 .006.707l-6.77 6.886a.5.5 0 0 1-.719-.006L.638 4.845a.5.5 0 1 1 .724-.69l2.872 3.011 6.41-6.517a.5.5 0 0 1 .707-.006z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </div>

  <div class="country-language-selector__option-item">
    <input
      type="radio"
      name="country_code"
      id="country-FR"
      value="FR"
      class="hidden peer/country"
    />
    <label
      for="country-FR"
      class="country-language-selector__option-label bg-grey-100 hover:bg-grey-200 peer-checked/country:bg-celtic-green...

JavaScript

var elms = document.querySelectorAll("input[type=radio]")

elms.forEach((input) => {
  console.log('sb-language-switcher.component.ts:132 (input)', input)
        input.addEventListener('input', e => console.log("added"))
        console.log('sb-language-switcher.component.ts:135 inoput()', "after")
        return
})

//language.addEventListener("change", function () {console.log("language changed")})