JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <h2>Log Into Your Account</h2>
    not a memember yet?
    <a href="#"> register</a>
    <div class="login">
        username
        <input class='background-match' type="text"/>
        password
        <input class='background-match' type="text"/>
    </div>
</div>

CSS

.container{
    width:250px;
    background-color:#1FB298;
    padding-top:50px;
    padding-bottom:50px;
    text-align:center;
    color:white;
}
a{ color:grey;
display:block;}

.login{
    margin:10px;
    padding:30px;
    background-color:white;
    color:black;
    text-align:left;
}
input{
    height:20px;
    border:1px solid lightgray;
}

JavaScript

var color = $('.container').css('background-color');
color = color.replace(')', ', 0.2)').replace('rgb', 'rgba');
$('.background-match').css({"background-color":color});