Browser Folder Tabs

.fx-v12-at-folder-15188 {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 240px;
  height: 120px;
  padding: 0 0 78px 8px;
  font-family: system-ui, sans-serif;
}
.fx-v12-at-folder-15188 label {
  position: relative;
  margin-right: -10px;
  cursor: pointer;
}
.fx-v12-at-folder-15188 input { position: absolute; opacity: 0; width: 0; height: 0; }
.fx-v12-at-folder-15188 span {
  display: block;
  padding: 0.4rem 1rem 0.45rem;
  font-size: 0.7rem;
  color: #94a3b8;
  background: #1e293b;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.fx-v12-at-folder-15188 label:hover span { color: #e2e8f0; transform: translateY(-2px); }
.fx-v12-at-folder-15188 input:checked + span {
  color: #fff;
  background: #6366f1;
  z-index: 2;
  position: relative;
  transform: none;
}
.fx-v12-at-folder-15188 .pane {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 78px;
  background: #6366f1;
  border-radius: 0.5rem;
  background-image: repeating-linear-gradient(#818cf8 0 6px, transparent 6px 14px);
  background-size: 60% 100%;
  background-position: 14px 12px;
  background-repeat: no-repeat;
}

<div class="fx-v12-at-folder-15188">
  <label>
    <input type="radio" name="fx-v12-at-folder-15188" checked />
    <span>index.html</span>
  </label>
  <label>
    <input type="radio" name="fx-v12-at-folder-15188" />
    <span>styles.css</span>
  </label>
  <label>
    <input type="radio" name="fx-v12-at-folder-15188" />
    <span>app.js</span>
  </label>
  <div class="pane"></div>
</div>