Modern CSS Demos

Loading ...

<div class="accent-grid">
    <div>
        <div class="accent-section">
    <div class="accent-group">
        <div class="accent-check">
            <label for="checkbox_818712924_1">
                <input id="checkbox_818712924_1" name="checkbox_818712924" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_818712924_2">
                <input id="checkbox_818712924_2" name="checkbox_818712924" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_818712924_1">
                <input id="radio_818712924_1" name="radio_818712924" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_818712924_2">
                <input id="radio_818712924_2" name="radio_818712924" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_818712924">Range</label>
        <input id="range" name="range_818712924" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_818712924" max="100" value="70">70%</progress>
    </div>
</div>
    </div>
    <div style="--accent-color: #9c27b0;">
        <div class="accent-section">
    <div class="accent-group">
        <div class="accent-check">
            <label for="checkbox_272540748_1">
                <input id="checkbox_272540748_1" name="checkbox_272540748" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_272540748_2">
                <input id="checkbox_272540748_2" name="checkbox_272540748" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_272540748_1">
                <input id="radio_272540748_1" name="radio_272540748" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_272540748_2">
                <input id="radio_272540748_2" name="radio_272540748" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_272540748">Range</label>
        <input id="range" name="range_272540748" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_272540748" max="100" value="70">70%</progress>
    </div>
</div>
    </div>
    <div style="--accent-color: #03a9f4;">
        <div class="accent-section">
    <div class="accent-group">
        <div class="accent-check">
            <label for="checkbox_1675537181_1">
                <input id="checkbox_1675537181_1" name="checkbox_1675537181" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_1675537181_2">
                <input id="checkbox_1675537181_2" name="checkbox_1675537181" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_1675537181_1">
                <input id="radio_1675537181_1" name="radio_1675537181" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_1675537181_2">
                <input id="radio_1675537181_2" name="radio_1675537181" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_1675537181">Range</label>
        <input id="range" name="range_1675537181" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_1675537181" max="100" value="70">70%</progress>
    </div>
</div>
    </div>
    <div style="--accent-color: #7cb342;">
        <div class="accent-section">
    <div class="accent-group">
        <div class="accent-check">
            <label for="checkbox_164382978_1">
                <input id="checkbox_164382978_1" name="checkbox_164382978" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_164382978_2">
                <input id="checkbox_164382978_2" name="checkbox_164382978" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_164382978_1">
                <input id="radio_164382978_1" name="radio_164382978" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_164382978_2">
                <input id="radio_164382978_2" name="radio_164382978" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_164382978">Range</label>
        <input id="range" name="range_164382978" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_164382978" max="100" value="70">70%</progress>
    </div>
</div>
    </div>
</div>

Zoom

Document

Container