JSFiddle - React, Tailwind, and code Playground

by Annie Lagang

HTML

<ol class="kleurenkiezer list-reset clearfix">
                    <li>
                        <input type="radio" id="kleur_wit" name="kleurenkiezer" value="wit">
                        <label for="kleur_wit" style="background: white;"></label>
                    </li>
                    <li>
                        <input type="radio" id="kleur_creme" name="kleurenkiezer" value="creme">
                        <label for="kleur_creme" style="background: #fffceb;"></label>
                    </li>
                    <li>
                        <input type="radio" id="kleur_lichtbruin" name="kleurenkiezer" value="lichtbruin">
                        <label for="kleur_lichtbruin" style="background: #968272;"></label>
                    </li>
                    <li>
                        <input type="radio" id="kleur_bordeauxrood" name="kleurenkiezer" value="bordeauxrood">
                        <label for="kleur_bordeauxrood" style="background: #941514;"></label>
                    </li>
                    <li>
                        <input type="radio" id="kleur_oudgroen" name="kleurenkiezer" value="oudgroen">
                        <label for="kleur_oudgroen" style="background: #7fa298;"></label>
                    </li>
                    <li>
                        <input type="radio" id="kleur_lichtblauw" name="kleurenkiezer" value="lichtblauw">
                        <label for="kleur_lichtblauw" style="background: #487eae;"></label>
                    </li>
                    <li>
                        <input type="radio" id="kleur_oudgeel" name="kleurenkiezer" value="oudgeel">
                        <label for="kleur_oudgeel" style="background: #b79130;"></label>
                    </li>
                    <li>
                        <input type="radio" id="kleur_zwart" name="kleurenkiezer" value="zwart">
                        <label for="kleur_zwart" style="background: #000;"></label>
                    </li>
               ...

CSS

.kleurenkiezer {
        width: 165px;
        margin-left: -10px;
        float: right;
    }

    .kleurenkiezer li {
        position: relative;

        width: 45px;
        height: 45px;
        margin: 0 0 10px 10px;
        border: 1px solid #bbbbbb;

        float: left;
    }

    .kleurenkiezer li input {
        position: absolute;
        top: 10px;
        left: 10px;

        z-index: 1000;
    }

    .kleurenkiezer li label {
        position: absolute;
        top: 0;
        left: 0;

        width: 43px;
        height: 43px;
    }