JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<label class="radioContainer">
         <span class="radioHolder">  <input type="radio" [checked]="eventMetaChecked" 
          (click)="onRadioChange('event')" name="radio">
        <span class="checkmark"></span></span>
       <span class="label-txt"> Event</span>
        </label>
         <label class="radioContainer">
         <span class="radioHolder">  <input type="radio" []="eventMetaChecked" 
          (click)="onRadioChange('event')" name="radio">
          <span class="checkmark"></span></span>
          <span class="label-txt">Event</span>
        </label>

SCSS

$color_1: #000;
$background-color_1: #fff;
$background-color_2: #ccc;

/* Hide the browser's default radio button */
/* Create a custom radio button */
/* On mouse-over, add a grey background color */
/* When the radio button is checked, add a blue background */
/* Create the indicator (the dot/circle - hidden when not checked) */
/* Show the indicator (dot/circle) when checked */
/* Style the indicator (dot/circle) */
.radioContainer {
	display: flex;
	position: relative;
	padding-left: 0;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 20px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: $color_1;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	margin-right: 16px;
	input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		left: 0;
		&:checked {
			~ {
				.checkmark {
					background-color: $background-color_1;
					border: solid 2px #8900c5;
					&:after {
						display: block;
					}
				}
			}
		}
	}
	&:hover {
		input {
			~ {
				.checkmark {
					background-color: $background-color_2;
				}
			}
		}
	}
	.checkmark {
		&:after {
			top: 2.5px;
			left: 2.5px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #8900c5;
		}
	}
}
.label-txt {
	margin: 0 0 0 12px;
}
.radioHolder {
	position: relative;
	height: 20px;
	width: 20px;
}
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 16.8px;
	width: 16.8px;
	background-color: $background-color_1;
	border: solid 2px #ccc;
	border-radius: 50%;
	&:after {
		content: "";
		position: absolute;
		display: none;
	}
}