HTML Demo: <input type="email">

<fieldset>
    <legend>Enter contact email</legend>

    <label for="primary">Primary address:</label>
    <input type="email" placeholder="drone@globex.com"
           pattern=".+@globex.com" size="30" required
           title="Must be a globex.com email address" />

    <label for="secondary">Secondary addresses:</label>
    <input type="email" placeholder="foo@this.com, bar@that.com"
           size="35" multiple
           title="Zero or more addresses, separated with ','" />

</fieldset>

legend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

label {
    font-size: .8rem;
    display: block;
    margin: 1rem 0 .2rem 0;
}

input:invalid:not(:focus) {
    outline: 1px solid #f00;
}

Output