JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="options-wrapper">

    <h4 class="options-title"><strong>Choose your Pokemon - Responsive grid based form radios</strong></h4>
    
    <div class="options-list">
        <div class="radio-wrapper radio-big">
            <input type="radio" name="radio" id="radio1"> 
            <label for="radio1">I choose this option</label>
        </div>
        <div class="radio-wrapper radio-big">
            <input type="radio" name="radio" id="radio2"> 
            <label for="radio2">Or perhaps I'd like this one better</label>
        </div>
        <div class="radio-wrapper radio-big">
            <input type="radio" name="radio" id="radio3"> 
            <label for="radio3">Or this one?</label>
        </div>
        <div class="radio-wrapper radio-big">
            <input type="radio" name="radio" id="radio4"> 
            <label for="radio4">WTF, I can'd decide what to chooose. Why 8 options?</label>
        </div>
        <div class="radio-wrapper radio-big">
            <input type="radio" name="radio" id="radio5"> 
            <label for="radio5">Here we start again</label>
        </div>
        <div class="radio-wrapper radio-big">
            <input type="radio" name="radio" id="radio6"> 
            <label for="radio6">This one is the best. I choose this</label>
        </div>
        <div class="radio-wrapper radio-big">
            <input type="radio" name="radio" id="radio7"> 
            <label for="radio7">Nope</label>
        </div>
        <div class="radio-wrapper radio-big">
           ...

SCSS

//  DO NOT COPY THIS - this already exists in style
.radio-wrapper {
  position: relative;
}

.radio-wrapper input {
  visibility: hidden;
  position: absolute;
  left: -99999px;
}

.radio-wrapper input + label {
  position: relative;
  padding: 5px 0 5px 30px;
  display: block;
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 0;
}

.radio-wrapper input + label:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 6px;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.radio-wrapper input + label:after {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  left: 9px;
  top: 15px;
  transition: all 0.2s linear;
}

.radio-wrapper input:checked + label:after {
  width: 10px;
  height: 10px;
  background: #1f1f1f;
  left: 5px;
  top: 11px;
}


// COPY FROM HERE


.radio-wrapper {
    
    &.radio-big {
        transition: all 0.2s ease;
        background: #fff;

        &:hover {
            box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
        }
       
        label {       
            padding: 30px;
            text-align: center;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            
            &:before {
                width: 100%;
                height: 100%;
                border-radius: 2px;
                top:0;
                left:0;
                box-shadow: inset 0px 0px 0px 0px #fdbc1e;
                transition: all 0.2s ease;
            }
            
            &:after {
                display: none;
            }
            
        }
        
        input:checked + label {
            font-weight: bold;
            
            &:before {
                border-color: #fdbc1e;
                box-shadow: inset 0px 0px 0px 3px #fdbc1e;
     ...