JSFiddle - React, Tailwind, and code Playground

by Rajeswaritest

HTML

<div id="id-3e8942a7-ff8e-4634-84ec-8ce174ab807c-20-msdyn_displayonscheduleboard-msdyn_displayonscheduleboard.fieldControl-checkbox-containercheckbox-inner-first" aria-label="No" aria-describedby="id-3e8942a7-ff8e-4634-84ec-8ce174ab807c-20-msdyn_displayonscheduleboard-msdyn_displayonscheduleboard.fieldControl-checkbox-inner-first" aria-required="true" aria-readonly="false" role="radio" tabindex="0" data-id="msdyn_displayonscheduleboard.fieldControl-checkbox-containercheckbox-inner-first" class="eq gf ig w aq dq pe ph fk fl nf ng dx ba bv ii pi pj pk pl ud pn po pp bx pq pr ps pt ue pv pw px py pz flexbox" aria-checked="true"><label id="id-3e8942a7-ff8e-4634-84ec-8ce174ab807c-20-msdyn_displayonscheduleboard-msdyn_displayonscheduleboard.fieldControl-checkbox-inner-first" aria-hidden="true" data-id="msdyn_displayonscheduleboard.fieldControl-checkbox-inner-first" class="wn wo wp ">No</label></div>
<div id="id-3e8942a7-ff8e-4634-84ec-8ce174ab807c-20-msdyn_displayonscheduleboard-msdyn_displayonscheduleboard.fieldControl-checkbox-containercheckbox-inner-second" aria-label="Yes" aria-describedby="id-3e8942a7-ff8e-4634-84ec-8ce174ab807c-20-msdyn_displayonscheduleboard-msdyn_displayonscheduleboard.fieldControl-checkbox-inner-second" aria-required="true" aria-readonly="false" role="radio" tabindex="-1" data-id="msdyn_displayonscheduleboard.fieldControl-checkbox-containercheckbox-inner-second" class="eq qq ig qr aq dq pe ph fk fl nf ng dx ba bv ii pi pj pk pl ud pn po pp bx pq pr ps pt ue pv pw px py pz wi wj z e af wk wl wm flexbox" aria-checked="false"><label id="id-3e8942a7-ff8e-4634-84ec-8ce174ab807c-20-msdyn_displayonscheduleboard-msdyn_displayonscheduleboard.fieldControl-checkbox-inner-second" aria-hidden="true" data-id="msdyn_displayonscheduleboard.fieldControl-checkbox-inner-second" class=" ">Yes</label></div>

CSS

.wh {
    justify-content: center;
}
.wg {
    align-items: center;
}
.w {
    width: 100%;
}
.g {
    position: relative;
}
.f {
    height: 100%;
}
.flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
}

.wm {
}

.wl {
    padding: 0px;
}

.wk {
    margin: 0px;
}

.wj {
    top: -10px;
}

.wi {
    left: -10px;
}

.qr {
    width: 1px;
}

.qq {
    height: 1px;
}

.pi {
    border-color: transparent;
}

.ph {
    color: rgb(0, 0, 0);
}

.pe {
    font-weight: 600;
}

.ng {
    padding-bottom: 0px;
}

.nf {
    padding-top: 0px;
}

.ii {
    border-width: 1px;
}

.ig {
    line-height: 2.5rem;
}

.fl {
    padding-right: 0.5rem;
}

.fk {
    padding-left: 0.5rem;
}

.eq {
    box-sizing: border-box;
}

.dx {
    margin-left: 0px;
}

.dq {
    font-size: 1rem;
}

.bv {
    border-style: solid;
}
.ba {
    margin-right: 0px;
}
.aq {
    text-overflow: ellipsis;
}
.af {
    opacity: 0;
}
.z {
    position: absolute;
}
.e {
    overflow: hidden;
}
.pb {
    word-break: normal;
}

.oh {
    white-space: normal;
}

.oh {
    white-space: normal;
}
.ar {
    white-space: nowrap;
}

.fv {
    font-family: SegoeUI-Semibold, "Segoe UI Semibold", "Segoe UI Regular", "Segoe UI";
}
.pi {
    border-color: transparent;
}

.ph {
    color: rgb(0, 0, 0);
}

.pe {
    font-weight: 600;
}

.ng {
    padding-bottom: 0px;
}

.nf {
    padding-top: 0px;
}

.ii {
    border-width: 1px;
}

.ig {
    line-height: 2.5rem;
}

.gf {
    height: 2.5rem;
}

.fl {
    padding-right: 0.5rem;
}

.fk {
    padding-left: 0.5rem;
}

.eq {
    box-sizing: border-box;
}

.dx {
    margin-left: 0px;
}

.dq {
    font-size: 1rem;
}

.bv {
    border-style: solid;
}
.ba {
    margin-right: 0px;
}
.aq {
    text-overflow: ellipsis;
}
.w {
    width: 100%;
}
.pb {
    word-break: normal;
}
.pb {
    word-break: normal;
}

.oh {
    white-space: normal;
}
.oh {
    white-space: normal;
}