JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="input-color">
            <input type="text" value="Orange" />
            <div class="color-box" style="background-color: #FF850A;"></div>
            <!-- Replace "#FF850A" to change the color -->
        </div>
    </li>
    <li>
        <div class="input-color">
            <input type="text" value="Navy blue" />
            <div class="color-box" style="background-color: navy;"></div>
            <!-- Replace "navy" to change the color -->
        </div>
    </li>
</ul>

CSS

ul {
    margin: 20px;
}

.input-color {
    position: relative;
}
.input-color input {
    padding-left: 20px;
}
.input-color .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    left: 5px;
    top: 5px;
}