Certainly! Here is a sample to-do list using HTML, JavaScript and CSS:

```html
<div class="container">
    <div id="addtodo">
        <input type="text" placeholder="New to-do item...">
        <button id="push">Add</button>
    </div>
    <div id="todolist"></div>

</div>
```

```css
*, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; }
body { height: 100vh; background: #1c1c1c; }
.container { width: 40%; top: 50%; left: 50%; background: #2c2c2c; border-radius: 10px; min-width: 450px; position: absolute; min-height: 100px; transform: translate(-50%,-50%); }
#addtodo, #todolist { position: relative; padding: 30px 20px; }
#todolist { border-radius: 10px; width: 100%; background-color: #2c2c2c; margin-top: 10px; }
#addtodo input, #addtodo button { height: 45px; border-radius: 5px; font-family: sans-serif; position: relative; }
#addtodo input { width: 75%; padding: 12px; color: #e0e0e0; font-weight: 500; font-size: 15px; border: 2px solid #444444; }
#addtodo input:focus { outline: none; border-color: #3a9eff; }
#addtodo button { float: right; font-weight: 500; font-size: 16px; background-color: #3a9eff; border: none; color: #ffffff; cursor: pointer; outline: none; width: 20%; }
.todo { border-radius: 5px; align-items: center; justify-content: space-between; border: 1px solid #444444; cursor: pointer; background-color: #383838; height: 50px; margin-bottom: 8px; padding: 5px 10px; display: flex; }
.todo span { font-family: sans-serif; font-size: 15px; font-weight: 400; color: #e0e0e0; }
.todo button { background-color: #3a9eff; color: #ffffff; border: none; cursor: pointer; outline: none; height: 100%; width: 40px; border-radius: 5px; }
```

```javascript
document.querySelector('#push').onclick = function(){
    if(document.querySelector('#addtodo input').value.length == 0){
        alert("Please add a to-do item name.")
    }
    else
    {
        document.querySelector('#todolist').innerHTML += `
            <div class="todo">
                <span id="tododesc">
                    ${document.querySelector('#addtodo input').value}
                </span>
                <button class="delete">
                    <i class="remtodo">remove</i>
                </button>
            </div>
        `;
        var existing_todos = document.querySelectorAll(".delete");
        for(var i=0; i<existing_todos.length; i++) {
            existing_todos[i].onclick = function(){
                this.parentNode.remove();
            }
        }
    }
}
```
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence