JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <a href="http://yahoo.com">
        <div class="parent">
            Parent Element
            <a href="http://google.com"><div class="child">Child Element</div></a>
             <a href="http://bing.com"><div class="child">Other Child</div></a>
        </div>
    </a>
</div>

CSS

.parent {
        margin: 4px 2px;
        width:150px;
        text-align: center;
        background-color: #aaa;
        font-weight: bold;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    .child {
        background-color: #ccc;
        padding: 6px;
        margin: 6px 6px;
    }
    .parent, .child {
        border-radius: 5px;
    }
    .parent:hover {
        background-color: red;
    }
    .child:hover {
        background-color: blue;
    }
    a {
        text-decoration: none;
        color: initial;
    }