Modern CSS Demos

Loading ...

<div class="accent-grid">
    <div>
        <div class="accent-section">
    <div class="accent-group">
        <div class="accent-check">
            <label for="checkbox_345615305_1">
                <input id="checkbox_345615305_1" name="checkbox_345615305" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_345615305_2">
                <input id="checkbox_345615305_2" name="checkbox_345615305" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_345615305_1">
                <input id="radio_345615305_1" name="radio_345615305" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_345615305_2">
                <input id="radio_345615305_2" name="radio_345615305" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_345615305">Range</label>
        <input id="range" name="range_345615305" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_345615305" 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_1466431454_1">
                <input id="checkbox_1466431454_1" name="checkbox_1466431454" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_1466431454_2">
                <input id="checkbox_1466431454_2" name="checkbox_1466431454" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_1466431454_1">
                <input id="radio_1466431454_1" name="radio_1466431454" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_1466431454_2">
                <input id="radio_1466431454_2" name="radio_1466431454" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_1466431454">Range</label>
        <input id="range" name="range_1466431454" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_1466431454" 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_1706722856_1">
                <input id="checkbox_1706722856_1" name="checkbox_1706722856" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_1706722856_2">
                <input id="checkbox_1706722856_2" name="checkbox_1706722856" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_1706722856_1">
                <input id="radio_1706722856_1" name="radio_1706722856" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_1706722856_2">
                <input id="radio_1706722856_2" name="radio_1706722856" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_1706722856">Range</label>
        <input id="range" name="range_1706722856" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_1706722856" 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_733774176_1">
                <input id="checkbox_733774176_1" name="checkbox_733774176" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_733774176_2">
                <input id="checkbox_733774176_2" name="checkbox_733774176" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_733774176_1">
                <input id="radio_733774176_1" name="radio_733774176" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_733774176_2">
                <input id="radio_733774176_2" name="radio_733774176" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_733774176">Range</label>
        <input id="range" name="range_733774176" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_733774176" max="100" value="70">70%</progress>
    </div>
</div>
    </div>
</div>

Zoom

Document

Container