Modern CSS Demos

Loading ...

<div class="accent-grid">
    <div>
        <div class="accent-section">
    <div class="accent-group">
        <div class="accent-check">
            <label for="checkbox_1581561372_1">
                <input id="checkbox_1581561372_1" name="checkbox_1581561372" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_1581561372_2">
                <input id="checkbox_1581561372_2" name="checkbox_1581561372" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_1581561372_1">
                <input id="radio_1581561372_1" name="radio_1581561372" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_1581561372_2">
                <input id="radio_1581561372_2" name="radio_1581561372" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_1581561372">Range</label>
        <input id="range" name="range_1581561372" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_1581561372" 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_1015114226_1">
                <input id="checkbox_1015114226_1" name="checkbox_1015114226" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_1015114226_2">
                <input id="checkbox_1015114226_2" name="checkbox_1015114226" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_1015114226_1">
                <input id="radio_1015114226_1" name="radio_1015114226" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_1015114226_2">
                <input id="radio_1015114226_2" name="radio_1015114226" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_1015114226">Range</label>
        <input id="range" name="range_1015114226" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_1015114226" 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_1712699620_1">
                <input id="checkbox_1712699620_1" name="checkbox_1712699620" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_1712699620_2">
                <input id="checkbox_1712699620_2" name="checkbox_1712699620" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_1712699620_1">
                <input id="radio_1712699620_1" name="radio_1712699620" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_1712699620_2">
                <input id="radio_1712699620_2" name="radio_1712699620" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_1712699620">Range</label>
        <input id="range" name="range_1712699620" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_1712699620" 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_275289663_1">
                <input id="checkbox_275289663_1" name="checkbox_275289663" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_275289663_2">
                <input id="checkbox_275289663_2" name="checkbox_275289663" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_275289663_1">
                <input id="radio_275289663_1" name="radio_275289663" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_275289663_2">
                <input id="radio_275289663_2" name="radio_275289663" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_275289663">Range</label>
        <input id="range" name="range_275289663" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_275289663" max="100" value="70">70%</progress>
    </div>
</div>
    </div>
</div>

Zoom

Document

Container