JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: flex; padding:10em">
<div class="ipt1Lst" style="margin-right: 10em">
        <div class="ipt1ExpWrp">
            <input id="exp" class="ipt1" type="radio" name="form1">
            <label class="ipt1Lbl" for="exp">
                <span class="rad1Idc"></span>
                <span class="ipt1Spa">text</span>
                <span class="ipt1ExpPlh"></span>
            </label>
            <div class="ipt1Exp">
                <svg class="ipt1Svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="1.6em" viewBox="3.5 3.5 14 14" enable-background="new 3.5 3.5 14 14" xml:space="preserve">
                    <path class="ipt1SvgPath" d="M15.85,11.187c0.029-0.225,0.051-0.449,0.051-0.687s-0.021-0.462-0.051-0.686l1.518-1.155 c0.137-0.105,0.172-0.294,0.086-0.448l-1.439-2.422c-0.086-0.154-0.281-0.21-0.438-0.154l-1.793,0.7 c-0.375-0.28-0.777-0.511-1.215-0.686l-0.274-1.855C12.272,3.626,12.122,3.5,11.942,3.5H9.063c-0.18,0-0.331,0.126-0.353,0.294 L8.437,5.649C7.998,5.824,7.594,6.062,7.22,6.335l-1.792-0.7c-0.166-0.063-0.353,0-0.439,0.154L3.55,8.211 C3.457,8.365,3.5,8.554,3.637,8.659l1.518,1.155c-0.029,0.224-0.05,0.455-0.05,0.686s0.021,0.462,0.05,0.687l-1.518,1.154 C3.5,12.445,3.464,12.635,3.55,12.789l1.439,2.422c0.086,0.154,0.281,0.21,0.439,0.154l1.792-0.7 c0.374,0.279,0.777,0.511,1.216,0.686l0.273,1.855C8.731,17.374,8.883,17.5,9.063,17.5h2.879c0.18,0,0.33-0.126,0.353-0.294 l0.274-1.855c0.438-0.175,0.84-0.413,1.215-0.686l1.793,0.7c0.164,0.063,0.352,0,0.438-0.154l1.439-2.422 c0.086-0.154,0.051-0.344-0.086-0.448L15.85,11.187z M10.502,12.95c-1.389,0-2.519-1.1-2.519-2.45c0-1.351,1.13-2.45,2.519-2.45 s2.52,1.099,2.52,2.45C13.021,11.851,11.891,12.95,10.502,12.95z"/>
                </svg>
            </div>
        </div>

        <input id="exp1" class="ipt1" type="radio" name="form1">
        <label class="ipt1Lbl" for="exp1">
            <span class="rad1Idc"></span>
            <span class="ipt1Spa">text</span>
        </label>
    </div>
    
 ...

CSS

html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, font, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 10px;
            font-family: 'Roboto', sans-serif;
            color: #8a8a8a;
            vertical-align: baseline;
            background: transparent;
            flex-shrink: 0;
            box-sizing: border-box;
        }
        body {
            line-height: 1;
        }
        ol, ul {
            list-style: none;
        }
        blockquote, q {
            quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }

        /* remember to define focus styles! */
        :focus {
            outline: 0;
        }

        /* remember to highlight inserts somehow! */
        ins {
            text-decoration: none;
        }
        del {
            text-decoration: line-through;
        }

        /* tables still need 'cellspacing="0"' in the markup */
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* remove standard-styles */
        input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border:none;
            border-radius: 0;
            font-size: 1em;
            position: absolute;
            width: 0;
            height: 0;
        }

        /* graceful degradation for ie8 */
        input[type='checkbox'],
        input[type='radio'] {
            width:auto;
            float:left;
           ...