JSFiddle - React, Tailwind, and code Playground

by bvotcode

HTML

<a href="www.abc.com">
<div class="image-wrapper">
<img class="btn-image" src="https://i.imgur.com/GtP6s3j.png"/><span class="btn-cnt" id="counter">123</span>
<div class="btn-text">
Number
</div>
</div>
</a>

CSS

.image-wrapper { text-align: center; display: inline-block; position: relative; }
.image-wrapper .btn-image { max-width: 75px; max-height: 75px; }
.image-wrapper .btn-text { display: block; }
.image-wrapper .btn-cnt { position: absolute; top: -5px; right: -5px; background: #f00; color: #fff; padding: 5px; border: 0; border-radius: 50%; font-weight: bold; font-size: 1.2em; }