Coder Wrap provides free to use snippets

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 font-size: 15px;
 line-height: 1.5;
 font-weight: 400;
 background: #f0f3f6;
 color: #3a3a3a;
}

.top-text-wrapper h4 {
 text-align: center;
 font-size: 30px;
 margin-top: 10%;
}

.grid-wrapper {
 display: flex;
 flex-flow: row wrap;
 margin: auto;
 justify-content: center;
 max-width: 1250px;
}

.radio-card {
 cursor: pointer;
 width: calc(33.33% - 30px);
 margin: 15px;
}

.radio-card .card-content-wrapper {
 background: #fff;
 border-radius: 5px;
 width: 100%;
 min-height: 440px;
 padding: 15px;
 display: grid;
 box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
 transition: 200ms linear;
 text-align: center;
}

.radio-card .check-icon {
 width: 20px;
 height: 20px;
 display: inline-block;
 border: solid 2px #e3e3e3;
 border-radius: 50%;
 transition: 200ms linear;
 position: relative;
}

.radio-card .check-icon:before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: url("data:image/svg+xml,%3Csvg width=!string!height=!string!viewBox=!string!fill=!string!xmlns=!string!%3E%3Cpath d=!string!fill=!string!/%3E%3C/svg%3E%0A");
 background-repeat: no-repeat;
 background-size: 12px;
 background-position: center center;
 transform: scale(1.6);
 transition: 200ms linear;
 opacity: 0;
}

.radio-card input[type=radio] {
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
}

.radio-card input[type=radio]:checked + .card-content-wrapper {
 box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #3057d5;
}

.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon {
 background: #3057d5;
 border-color: #3057d5;
 transform: scale(1.2);
}

.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon:before {
 transform: scale(1);
 opacity: 1;
}

.radio-card input[type=radio]:focus + .card-content-wrapper .check-icon {
 box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
 border-color: #3056d5;
}

.radio-card .card-content img {
 margin-bottom: 10px;
}

.radio-card .card-content h4 {
 font-size: 20px;
 letter-spacing: -0.24px;
 text-align: center;
 color: #1f2949;
 margin-bottom: 10px;
}

.radio-card .card-content h5 {
 font-size: 14px;
 line-height: 1.4;
 text-align: center;
 color: #686d73;
}
@media(max-width:992px) {
 .radio-card {
  width: calc(100% - 30px);
 }
}