Modern CSS Demos

Loading ...

<div class="accent-grid">
    <div>
        <div class="accent-section">
    <div class="accent-group">
        <div class="accent-check">
            <label for="checkbox_416603822_1">
                <input id="checkbox_416603822_1" name="checkbox_416603822" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_416603822_2">
                <input id="checkbox_416603822_2" name="checkbox_416603822" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_416603822_1">
                <input id="radio_416603822_1" name="radio_416603822" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_416603822_2">
                <input id="radio_416603822_2" name="radio_416603822" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_416603822">Range</label>
        <input id="range" name="range_416603822" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_416603822" 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_1870530696_1">
                <input id="checkbox_1870530696_1" name="checkbox_1870530696" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_1870530696_2">
                <input id="checkbox_1870530696_2" name="checkbox_1870530696" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_1870530696_1">
                <input id="radio_1870530696_1" name="radio_1870530696" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_1870530696_2">
                <input id="radio_1870530696_2" name="radio_1870530696" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_1870530696">Range</label>
        <input id="range" name="range_1870530696" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_1870530696" 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_1882889245_1">
                <input id="checkbox_1882889245_1" name="checkbox_1882889245" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_1882889245_2">
                <input id="checkbox_1882889245_2" name="checkbox_1882889245" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_1882889245_1">
                <input id="radio_1882889245_1" name="radio_1882889245" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_1882889245_2">
                <input id="radio_1882889245_2" name="radio_1882889245" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_1882889245">Range</label>
        <input id="range" name="range_1882889245" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_1882889245" 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_761641718_1">
                <input id="checkbox_761641718_1" name="checkbox_761641718" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_761641718_2">
                <input id="checkbox_761641718_2" name="checkbox_761641718" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_761641718_1">
                <input id="radio_761641718_1" name="radio_761641718" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_761641718_2">
                <input id="radio_761641718_2" name="radio_761641718" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_761641718">Range</label>
        <input id="range" name="range_761641718" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_761641718" max="100" value="70">70%</progress>
    </div>
</div>
    </div>
</div>

Zoom

Document

Container