Modern CSS Demos

Loading ...

<div class="accent-grid">
    <div>
        <div class="accent-section">
    <div class="accent-group">
        <div class="accent-check">
            <label for="checkbox_2072149839_1">
                <input id="checkbox_2072149839_1" name="checkbox_2072149839" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_2072149839_2">
                <input id="checkbox_2072149839_2" name="checkbox_2072149839" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_2072149839_1">
                <input id="radio_2072149839_1" name="radio_2072149839" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_2072149839_2">
                <input id="radio_2072149839_2" name="radio_2072149839" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_2072149839">Range</label>
        <input id="range" name="range_2072149839" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_2072149839" 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_733389044_1">
                <input id="checkbox_733389044_1" name="checkbox_733389044" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_733389044_2">
                <input id="checkbox_733389044_2" name="checkbox_733389044" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_733389044_1">
                <input id="radio_733389044_1" name="radio_733389044" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_733389044_2">
                <input id="radio_733389044_2" name="radio_733389044" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_733389044">Range</label>
        <input id="range" name="range_733389044" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_733389044" 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_892673766_1">
                <input id="checkbox_892673766_1" name="checkbox_892673766" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_892673766_2">
                <input id="checkbox_892673766_2" name="checkbox_892673766" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_892673766_1">
                <input id="radio_892673766_1" name="radio_892673766" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_892673766_2">
                <input id="radio_892673766_2" name="radio_892673766" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_892673766">Range</label>
        <input id="range" name="range_892673766" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_892673766" 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_419931551_1">
                <input id="checkbox_419931551_1" name="checkbox_419931551" type="checkbox" checked="checked" />
                Checkbox 1
            </label>
        </div>
        <div class="accent-check">
            <label for="checkbox_419931551_2">
                <input id="checkbox_419931551_2" name="checkbox_419931551" type="checkbox" />
                Checkbox 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <div class="accent-check">
            <label for="radio_419931551_1">
                <input id="radio_419931551_1" name="radio_419931551" type="radio" checked="checked" />
                Radio 1
            </label>
        </div>
        <div class="accent-check">
            <label for="radio_419931551_2">
                <input id="radio_419931551_2" name="radio_419931551" type="radio" />
                Radio 2
            </label>
        </div>
    </div>
    <div class="accent-group">
        <label for="range_419931551">Range</label>
        <input id="range" name="range_419931551" type="range" />
    </div>
    <div class="accent-group">
        <label for="progress">Progress</label>
        <progress id="progress" name="progress_419931551" max="100" value="70">70%</progress>
    </div>
</div>
    </div>
</div>

Zoom

Document

Container