JSFiddle - React, Tailwind, and code Playground

HTML

<div class="t">
  <div class="t-head">
    <span title="Header with icon">Header with icon</span>
  </div>
  <div class="t-body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero officia, quam nulla quis praesentium iste quibusdam dicta at illo soluta sapiente est illum vitae. Inventore neque excepturi vitae voluptas reiciendis!
  </div>
</div>

SCSS

body {
  padding: 100px;
}

.t {
  --tab-background: #437f98;
  --tab-text-color: #fff8f8;
  --tab-radius: 15px;
  --tab-padding: 20px;

  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(1rem, 1fr);
  min-width: 200px;
  color: var(--tab-text-color);
  filter: drop-shadow(2px 4px 6px gray);

  &-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-self: end;
    max-width: 60%;
    padding: var(--tab-padding);
    padding-bottom: calc(var(--tab-padding) / 2);
    border-radius: var(--tab-radius) var(--tab-radius) 0 0;
    background: var(--tab-background);

    span {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-weight: 600;
    }

    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(var(--tab-radius) * 2);
      height: calc(var(--tab-radius) * 2);
      background: transparent;
      border-radius: var(--tab-radius);
      box-shadow: var(--tab-radius) var(--tab-radius) 0 0 var(--tab-background);
      transform: translateX(-100%);
    }
  }

  &-body {
    padding: var(--tab-padding);
    border-radius: var(--tab-radius) 0 var(--tab-radius) var(--tab-radius);
    background: var(--tab-background);
  }
}