This is a button component.

Basic button

<button>Click me</button>

button {
    color: white;
    background-color: green;
}

document.querySelector("button").addEventListener("click", e => alert("Clicked button"))

Fancy button

<button>Fancy button</button>

button {
    color: white;
    background-color: red;
}

document.querySelector("button").addEventListener("click", e => alert("Clicked fancy button"))

This is a color component.

Primary colors

#f00

This is a dropdown component.

Basic dropdown

<select name="dropdown">
    <option>Select</option>
    <option>Option A</option>
    <option>Option B</option>
    <option>Option C</option>
</select>

select {
    font-size: 1.5em;
}

document.querySelector("select").addEventListener("change", e => alert(`Selected ${e.target.value}`))

Fancy dropdown

<select name="dropdown">
    <option>Select</option>
    <option>Option A</option>
    <option>Option B</option>
    <option>Option C</option>
</select>

select {
    font-size: 1.5em;
    background-color: red;
}

document.querySelector("select").addEventListener("change", e => alert(`Selected fancy ${e.target.value}`))