JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="gender" value="m">
<input type="radio" name="gender" value="f">
<input type="text" name="dummy">

CSS

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="radio"] {
    position: relative;
    margin-top: 6px;
    margin-right: 4px;
    vertical-align: top;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
input[type="radio"]:checked:after{
    background-color: green; /* SET: checked checkbox background */
}
input[type="radio"]:after{
    border: none;
    border-width: 0 0 0 0;
    border-style: solid;
    border-color: #000; 
}

input[type="radio"]:before,
input[type="radio"]:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin-top:-13px;
    border-radius: 50%;
    border-width: 1px 1px 1px 1px;
}
input[type="text"]:focus{
  border-color: blue;
  outline: none;
}