JSFiddle - React, Tailwind, and code Playground

HTML

<a class="box" href="http://www.google.co.uk">
    <aside class="box-content">
        <span class="cal-icon">Icon</span>
        <h3>Events Calendar</h3>
        <p>Join the latest discussions, webinars and courses at nEI.</p>
    </aside>
</a>

CSS

/* standard container stuff */

.box-content {
    background: #ffffff;
    margin: 40px 16px 0 0;
    padding: 15px;
}

.box {
    text-decoration: none;
}

/* calendar icon & header stuff */

.cal-icon {
    width: 50px;
    height: 50px;
    border: 1px solid lightblue;
    color: orange;
}

h3, p {
    vertical-align: top;
    color: lightblue;
}

/* box hover */

.box-content:hover {
    border: 1px solid red;
    cursor: pointer;
    text-decoration: none;
}

/* H3 hover */
.box-content:hover > h3 {
    color: red;
}

/* cal icon hover */
.box-content:hover > .cal-icon {
    border: 1px solid red;
    text-decoration: none;
}