JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<section>
    <ul class="houses">
        <li class="condo"><img src="https://s7.postimg.org/6l6eyc1kb/top-0-0.png" alt=""><input type="radio" name="foo"></li>
        <li class="trees"><img src="https://s7.postimg.org/43unr29y3/top-1-0.png" alt=""></li>
        <li class="house"><img src="https://s7.postimg.org/p0qvvqnej/top-2-0.png" alt=""><input type="radio" name="foo"></li>
        <li class="trees"><img src="https://s7.postimg.org/e15ok5cez/top-3-0.png" alt=""></li>
        <li class="duplex"><img src="https://s7.postimg.org/skctljxu3/top-4-0.png" alt=""><input type="radio" name="foo"></li>
        <li class="trees"><img src="https://s7.postimg.org/5iw8ftdm3/top-5-0.png" alt=""></li>
        <li class="apartment"><img src="https://s7.postimg.org/mw6iuogmz/top-6-0.png" alt=""><input type="radio" name="foo"></li>
    </ul>
</section>

SCSS

html {
    background-color: white;
}

section {
    display: flex;
    justify-content: center;
}

.houses {
    height: 200px;
    flex-flow: column;
    align-items: center;
    list-style: none;
    padding: 0;
    display: inline-flex;

    li {
        text-align: center;

        img {
            display: block;
        }
    }

    .trees {
        display: none;
    }

    input {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: 100%;
            background: white;
            border: 2px solid skyblue;
        }
    }

    input:checked {
        &::after {
            background: blue;
        }
    }

    .condo input {
        margin-left: 34%;
    }

    .house input {
        margin-right: 10%;
    }

    .duplex input {
        margin-right: 4%;
    }

    .apartment input {
        margin-right: 25%;
    }
}

@media screen and (min-width: 500px) {
    .houses {
        background: url(https://s7.postimg.org/vefyyz557/top.png) no-repeat top;
        background-size: 100% auto;
        flex-flow: row wrap;
    }
}

@media screen and (min-width: 800px) {
    .houses {
        align-items: stretch;
        flex-flow: row nowrap;
        padding-top: 2rem;
        
        .trees {
            display: block;
        }
    }
}