JSFiddle - React, Tailwind, and code Playground

by David

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-dark">Dark</span>

<p>

</p>
<span class="atlas-badge-duotone">
<span class="badge bg-dark bg-outline">Light</span>
<span class="badge bg-primary" style="left: -5px;">Primary</span>
</span>

CSS

.atlas-badge-duotone {
  display: flex;
  border: 1px solid red;
  
}
.atlas-badge-duotone span:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.atlas-badge-duotone span:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}