JSFiddle - React, Tailwind, and code Playground

by von

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tagset mt-5">
  <span class="badge bg-primary position-relative">User <i class="glyphicon glyphicon-zoom-in"></i></span>
  
</div>

CSS

.badge {
  display: inline-block;
  margin: auto 10px;
  padding: 10px 30px !important;
}

.fas {
  padding: .2rem .3rem;
  position: absolute;
  /* You may need to change top and right. They depend on padding/widht of .badge */
  top: -10px;
  right: -10px;
  background: green;
  border-radius: 50%;
}