JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Со ссылкой не работает -->
<a class="topbt" href="#">
    <div></div>
</a>
<a class="topbt" href="#">
    <div class="topmsg">
        <a href="#1">!</a> <!-- !!! -->
    </div>
    <div></div>
</a>
<a class="topbt" href="#">
    <div></div>
</a>
<br/><br/><br/>

<!-- С любым другим элементом работает -->
<a class="topbt" href="#">
    <div></div>
</a>
<a class="topbt" href="#">
    <div class="topmsg">
        <span>!</span>
    </div>
    <div></div>
</a>
<a class="topbt" href="#">
    <div></div>
</a>

CSS

.topbt {
    border: solid gray 1px;
    border-radius: 4px;
    float: left;
    height: 20px;
    margin: 2px;
}
.topbt div {
    float: left;    
    width: 20px;
}
.topmsg {
    position: absolute;
}
.topmsg a {
    display: block;
    position: relative;
}