JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<form action="#">

    <div class="radio">
        <label class="label">
          <input type="radio" name="dimension" />
          <span class="label-text">3.1M</span>
        </label>
    </div>

    <div class="radio">
        <label class="label">
          <input type="radio" name="dimension" />
          <span class="label-text">3.2M</span>
        </label>
    </div>

    <div class="radio">
        <label class="label">
          <input type="radio" name="dimension" />
          <span class="label-text">3.4M</span>
        </label>
    </div>

    <div class="radio">
        <label class="label">
          <input type="radio" name="dimension" />
          <span class="label-text">3.6M</span>
        </label>
    </div>

</form>

SCSS

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    padding: 5%;
    background: #eee;
}

.radio {
    display: inline-block;
    position: relative;
    [type="radio"] {
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        &:checked {
            &+.label-text {
                background: #aaffaa;
                border-color: #669966;
            }
        }
    }
    .label {
        &-text {
            display: inline-block;
            font-size: 12px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #fff;
            border: 2px solid #aaa;
            cursor: pointer;
            transition: all 200ms ease;
        }
    }
    &+.radio {
        margin-left: 20px;
    }
}