JSFiddle - React, Tailwind, and code Playground

by anpel13

HTML

<p>Select an option:</p>

<div>
  <input class="check" type="radio" id="huey" name="duck" value="huey" checked>
  <label for="huey">Huey</label>
</div>

<div>
  <input class="check" type="radio" id="dewey" name="duck" value="dewey">
  <label for="dewey">Dewey</label>
</div>

<div>
  <input class="check" type="radio" id="louie" name="duck" value="louie">
  <label for="louie">Louie</label>
</div>

CSS

:root {
      --background-color: white;
      --text-color: black;
      --fill-color: black;
      --border-color: black;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --background-color: black;
        --text-color: white;
        --fill-color: white;
        --border-color: white;
      }
    }

    body {
      background: var(--background-color);
      color: var(--text-color);
    }

    div {
      display: flex;
      align-items: center;
    }

    input[type=radio] {
      appearance: none;
      margin: 0 0.5rem 0 0;
      border: 1px solid var(--border-color);
      border-radius: 50%;
      width: 1rem;
      height: 1rem;
    }

    input[type=radio]:checked {
      background: radial-gradient(var(--fill-color) 0%, var(--fill-color) 30%, var(--background-color) 31%);
    }