JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myDiv">
    <div class="subDiv">hover me</div>
</div>

CSS

.myDiv {
    width: 200px;
    height: 20px;
    border: 5px solid rgba(255, 166, 9, 0.1);
    transition: all 1s;
}
.subDiv {
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
}
.myDiv:hover .subDiv {
    color: #ffa609;
    transition: all 1s;
}
.myDiv:hover {
    border: 5px solid rgba(255, 166, 9, 1);
}