JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<ul class="expandable-checklist">
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="option1">Hello label</label>
        <input type="radio" id="option1" name="a" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello world</p>
            </div>
        </div>
    </li>
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="option2">Hello label</label>
        <input type="radio" id="option2" name="a" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello world</p>
            </div>
        </div>
    </li>
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="option3">Hello label</label>
        <input type="radio" id="option3" name="a" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello world</p>
            </div>
        </div>
    </li>
</ul>


<ul class="expandable-checklist">
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="optiona">Hello label</label>
        <input type="checkbox" id="optiona" name="b" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello world</p>
            </div>
        </div>
    </li>
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="optionb">Hello label</label>
        <input type="checkbox" id="optionb" name="c" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello...

CSS

body, html {
    font-family: Arial, sans-serif;
}

.expandable-checklist {
    padding: 0;
}
    .expandable-checklist-item {
        position: relative;
        overflow: hidden;
        list-style-type: none;
        margin: 0 0 3px 0;
    }

    .expandable-checklist-label {
        display: block;
        padding: 10px;
        padding-left: 35px;
        line-height: 150%;
        background-color: #f9f9f9;
        border: 1px solid #e1e1e1;
        -webkit-box-shadow: inset 0 0 1px 1px #fff;
        box-shadow: inset 0 0 1px 1px #fff;
        font-size: 12px;
    }

    .expandable-checklist-input {
        position: absolute;
        left: 10px;
        top: 10px;
    }

    .expandable-checklist-input + .expandable-checklist-full {
        display: none;
        position: relative;
        z-index: 100;
        margin-top: -1px;
        
        margin-bottom: 10px;
        padding: 10px 20px;
        border: 1px solid #e1e1e1;
        background-color: #f9f9f9;
        -webkit-box-shadow: inset 0 0 1px 5px rgba(167, 167, 167, 0.03);
        box-shadow: inset 0 0 1px 5px rgba(167, 167, 167, 0.03);
    }

    .expandable-checklist-input:checked + .expandable-checklist-full {
        display: block;
    }

    .expandable-checklist-text {
        /*padding-left: 30px;*/
        font-size: 12px;
    }