JSFiddle - React, Tailwind, and code Playground

HTML

<div class="status__wrap">
   <div class="status__item">
     <input id="s_1" type="checkbox">
     <label for="s_1">color1</label>
   </div>
   <div class="status__item status__item--two">
     <input id="s_2" type="checkbox">
     <label for="s_2">color2</label>
   </div>
 </div>
 <!--end status__wrap-->

SCSS

.status {

	&__wrap {
		display: flex;
		padding-top: 25px;
		.status__item:not(:last-child) {
			margin-right: 30px;
		}
	}

	&__item {
		--color1: #c48802;
		--color2: #eddbb3;
		input {
			display: none;
			&:checked + label:before {
				opacity: 1;
			}
		}
		label {
			position: relative;
			color: #fff;
			&:after, &:before {
				position: absolute;
				content: ' ';
				top: 50%;
			}

			&:after {
				transform: translateY(-50%);
				left: 0px;
				width: 44px;
				height: 44px;
				border-radius: 50%;
				border: 2px solid var(--color1);
				background-color: var(--color2);
			}
      
      

			&:before {
				z-index: 2;
				opacity: 0;
				font-size: 14px;
				border-color: var(--color1);
				border-style: solid;
				border-width: 0 .25em .25em 0;
				top: 50%;
				left: 15px;
				transform: rotate(45deg) translate(-50%,-50%);
				width: .7em;
				height: 1.1em;
			}
		}
		&--two {
			--color1: darkgreen;
			--color2: #528701;
		}
	}
}