JSFiddle - React, Tailwind, and code Playground

by Kamil

HTML

<fieldset>
    <legend>Contact information</legend>

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone"
           placeholder="+48 123 456 789"
           pattern="[0-9]{2}[0-9]{3}[0-9]{3}[0-9]{3}"
           required />
    <span class="validity"></span>

</fieldset>

CSS

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

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

input {
    margin: 1rem 0;
    width: 60%;
}

label {
    display: inline-block;
    font-size: .8rem;
    width: 20%;
}

input:invalid + span:after {
    content: '✖';
    color: #f00;
    padding-left: 5px;
}

input:valid + span:after {
    content: '✓';
    color: #26b72b;
    padding-left: 5px;
}