JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="banner green">
  <div class="icon">
    <i class="fa-solid fa-globe"></i>
  </div>
  <div class="groupSign">
    Администратор
  </div>
</div>

CSS

.banner {
  border-radius: 5px;
  border: 1px solid black;
  margin: 3px;
  box-shadow: 0 0 5px black;
  width: 200px;
  background: #ddd;
}
.banner.green {
  background: #8FBC8F;
  color: #fff;
}
.banner.green .icon {
  background: #5F9EA0;
}
.banner > div {
  display: inline-block;
}
.banner .icon {
  background: #ccc;
  color: #fff;
  width: 18px;
  padding: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.banner .groupSign {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}