JSFiddle - React, Tailwind, and code Playground

HTML

<div id="your_div_id1">
    <p>This is color input type!</p>
</div>

<div id="your_div_id2">
    <p>This is text input type!</p>
</div>

<input type="color" name="bgcolor1" id="bgcolor1">
    
<input type="text" name="bgcolor2" id="bgcolor2" maxlength="6" placeholder="Hex representation of the color">

CSS

div {
    border: 1px solid #333;
    margin-bottom: 20px;
}

input {
    display: block;
    margin-bottom: 20px;
}

JavaScript

$('#bgcolor1').on('change', function() {
    var color = $(this).val();
    $('#your_div_id1').css('background-color', color);
});

$('#bgcolor2').on('change', function() {
    var color = $(this).val();
    var isOk  = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#'+color)
    if (isOk) { //If input is a valid representation of a color
        $('#your_div_id2').css('background-color', '#'+color);
    }
});