JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="radiobtn-ig ml-0">
  <label>
    <input name="roles" type="radio">
    <i class="input-helper"></i>
    <div class="chckbx-txt">Admin</div>
  </label>
</div>

SCSS

.radiobtn-ig {
    position: relative;
    margin-top: 15px;
    margin-bottom: 20px;
    margin-left: 15px;

    label {
        height: 20px;
        padding-left: 20px;
        display: block;
        margin-top: -3px;
        position: unset !important;
        pointer-events: unset !important;
    }

    span {
        cursor: pointer;
    }

    input {
        top: 0;
        left: 0;
        z-index: 1;
        cursor: pointer;
        opacity: 0;
        position: absolute;

        &:checked+.input-helper:before {
            border-color: $ash2;
        }
    }

    .input-helper {

        &:before,
        &:after {
            position: absolute;
            content: "";
            transition: all 200ms;
        }

        &:before {
            left: 0;
            border: 1px solid $ash2;
            border-radius: 2px;
        }
    }

    input {
        width: 15px;
        height: 15px;

        &:checked+.input-helper {
            &:before {
                background-color: white;
                border: 1px solid black;
                box-shadow: none;
            }

            &:after {
                color: black;
                transform: scale(1);
                opacity: 1;
            }
        }
    }

    .input-helper {
        &:before {
            top: 0;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            color: white;
            border: 1px solid $ash2;
            box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.4);
        }

        &:after {
            font-family: 'FontAwesome';
            content: '\f111';
            font-size: 1rem;
            left: 0.37rem;
            top: 0.2rem;
            color: $clr-999;
            transform: scale(0);
            opacity: 0;
        }
    }

    .chckbx-txt {
        font-size: 16px;
        float: left;
        margin-top: -1rem;
        cursor: pointer;
        line-height: 3.6rem;
    }
}