Перекрывающаяся папка

Question

Я пытаюсь воссоздать вид вкладки ниже.Я пытался использовать псевдоэлементы :before и :after, следуя этому фрагменту , но перекрывать их не имело смысла.Я также использую React.js, но я надеялся, что смогу сделать это только с помощью CSS / HTML.Какой самый простой способ добиться этого?

Текущий код:

.tab-list {
  border-bottom: 1.5px solid #4EBDE5;
  padding-left: 0;
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.tab-list-item:hover {
  background-color: #4EBDE5;
  color: white;
  border-radius: 5px 5px 0 0;
}

.tab-list-active {
  border-width: 1px 1px 0 1px;
  background-color: #4EBDE5;
  color: white;
  border-radius: 5px 5px 0 0;
}

<ol class="tab-list">
  <li class="tab-list-item tab-list-active">Name</div>
  <li class="tab-list-item">Name</div>
  <li class="tab-list-item">Name</div>
</ol>

Желаемый внешний вид: