Radio Button 1

• Vista previa

• Código

  const Radio1 = () => {
      return (
        <ul className="flex items-center gap-4">
          <li className="flex-none">
            <label htmlFor="radio1" className="block relative w-8 h-8">
              <input id="radio1" type="radio" name="color" className="sr-only peer" />
              <span className="inline-flex justify-center items-center w-full h-full rounded-full peer-checked:ring ring-offset-2 ring-offset-background cursor-pointer duration-150 bg-red-500/30 peer-checked:bg-red-500 ring-red-500"></span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                className="w-5 h-5 text-white absolute inset-0 m-auto z-0 pointer-events-none hidden peer-checked:block duration-150"
              >
                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
            </label>
          </li>
          <li className="flex-none">
            <label htmlFor="radio2" className="block relative w-8 h-8">
              <input id="radio2" type="radio" name="color" className="sr-only peer" />
              <span className="inline-flex justify-center items-center w-full h-full rounded-full peer-checked:ring ring-offset-2 ring-offset-background cursor-pointer duration-150 bg-blue-500/30 peer-checked:bg-blue-500 ring-blue-500"></span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                className="w-5 h-5 text-white absolute inset-0 m-auto z-0 pointer-events-none hidden peer-checked:block duration-150"
              >
                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
            </label>
          </li>
          <li className="flex-none">
            <label htmlFor="radio3" className="block relative w-8 h-8">
              <input id="radio3" type="radio" name="color" className="sr-only peer" />
              <span className="inline-flex justify-center items-center w-full h-full rounded-full peer-checked:ring ring-offset-2 ring-offset-background cursor-pointer duration-150 bg-green-500/30 peer-checked:bg-green-500 ring-green-500"></span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                className="w-5 h-5 text-white absolute inset-0 m-auto z-0 pointer-events-none hidden peer-checked:block duration-150"
              >
                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
            </label>
          </li>
          <li className="flex-none">
            <label htmlFor="radio4" className="block relative w-8 h-8">
              <input id="radio4" type="radio" name="color" className="sr-only peer" />
              <span className="inline-flex justify-center items-center w-full h-full rounded-full peer-checked:ring ring-offset-2 ring-offset-background cursor-pointer duration-150 bg-purple-500/30 peer-checked:bg-purple-500 ring-purple-500"></span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                className="w-5 h-5 text-white absolute inset-0 m-auto z-0 pointer-events-none hidden peer-checked:block duration-150"
              >
                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
            </label>
          </li>
          <li className="flex-none">
            <label htmlFor="radio5" className="block relative w-8 h-8">
              <input id="radio5" type="radio" name="color" className="sr-only peer" />
              <span className="inline-flex justify-center items-center w-full h-full rounded-full peer-checked:ring ring-offset-2 ring-offset-background cursor-pointer duration-150 bg-sky-500/30 peer-checked:bg-sky-500 ring-sky-500"></span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth="1.5"
                stroke="currentColor"
                className="w-5 h-5 text-white absolute inset-0 m-auto z-0 pointer-events-none hidden peer-checked:block duration-150"
              >
                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
              </svg>
            </label>
          </li>
        </ul>
      );
    };
    
    export default Radio1;