JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<span class="tag-wrap">
  <span class="tag">
    Lorem
  </span>
</span>

<span class="tag-wrap">
  <span class="tag">
    Ipsum set amet
  </span>
</span>

<span class="tag-wrap">
  <span class="tag">
    Doloren
  </span>
</span>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 15px;
  background-color: #252525;
}

.tag-wrap {
  filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}

.tag {
  background: #18bcfd;
  color: #222;
  padding: 8px 8px 10px 18px;
  font: bold 12px system-ui;
  clip-path: polygon(13px 0%, 100% 0%, 100% 100%, 13px 100%, 0 50%);
  display: inline-block;
  line-height: 1;
  text-shadow: 1px 1px 2px #d5f3ff;
  overflow: hidden;
  margin-right: 15px;
  border-right: 10px solid #00aff5;
}

.tag-wrap:last-of-type .tag{
  margin-right: 0;
}