Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box;}
/**Typeo CSS End**/
.radio-list-main{ font-family: Poppins; width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #f3f3f3;
    border: #ccc 1px solid;}
.radio-list {width: 100%;display: flex;
    flex-flow: row wrap;
    align-items: center;}
.radio-list .radio-item {
	position: relative; 
	margin: 0.5%;
	max-width: 24%;
	width: 100%;
}
.radio-list input[type="radio"]{ 
	opacity: 0; 
	cursor: pointer; 
	position: absolute; 
	top: 6px; 
	left: 7px;
}
.custom-radio{
	min-height: 110px;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    padding: 8px 15px;
    border: #8f8f8f 2px solid;
    color: #8f8f8f;
    position: relative;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 700;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
}
.custom-radio:before {
	content: '';
	position: absolute;
	right: 10px;
	top: 10px;
	width: 20px;
	height: 20px;
	border-radius: 100%;
	border: #59b259 1px solid;
	transition: 0.5s all;
    -webkit-transition: 0.5s all;
    opacity: 0;
}
.custom-radio:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 7px;
    border-left: #59b259 1px solid;
    right: 15px;
    top: 14px;
    border-bottom: #59b259 1px solid;
    transform: rotate(-45deg);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    opacity: 0;
}
.radio-list input:checked~.custom-radio { 
	border-color:#59b259;  
	color:#59b259;
}
.radio-list input:checked~.custom-radio:after, 
.radio-list input:checked~.custom-radio:before { 
	opacity: 1;
}