JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<div class="statBox">
  <div class="statTitleWrap">
    <h1>
      Name
    </h1>
  </div>
  <div class="statRow">
    <div class="statContent">
      <div>
        Title:
      </div>
      <div>
        cascasca cascasca cascasca cascasca cascasca cascasca cascasca cascasca
      </div>
    </div>
    <div class="statRowBackground"></div>
  </div>

  <div class="statRow">
    <div class="statContent">
      <div>
        Title:
      </div>
      <div>
        cascasca cascasca cascasca cascasca cascasca cascasca cascasca cascasca
      </div>
    </div>
    <div class="statRowBackground"></div>
  </div>


  <div class="statRow">
    <div class="statContent">
      <div>
        Title:
      </div>
      <div>
        cascasca cascasca cascasca cascasca cascasca cascasca cascasca cascasca
      </div>
    </div>
    <div class="statRowBackground"></div>
  </div>


  <div class="statRow">
    <div class="statContent">
      <div>
        Title:
      </div>
      <div>
        cascasca cascasca cascasca cascasca cascasca cascasca cascasca cascasca
      </div>
    </div>
    <div class="statRowBackground"></div>
  </div>


  <div class="statRow">
    <div class="statContent">
      <div>
        Title:
      </div>
      <div>
        cascasca cascasca cascasca cascasca cascasca cascasca cascasca cascasca
      </div>
    </div>
    <div class="statRowBackground"></div>
  </div>

  <div class="statBoxBackground"></div>

</div>

CSS

.statBox {
  width: 300px;
  padding: 15px;
  position: relative;
}

.statTitleWrap{
  position: relative;
  z-index: 5;
}

.statRow {
  position: relative;
  margin-bottom: 20px;
  z-index: 5;
}

.statRow:before {
  --s: 10px;
  content: "";
  width: 7px;
  height: calc(100% - 10px);
  background: #fff;
  position: absolute;
  left: 10px;
  top: 10px;
  clip-path: polygon(100% 0, 100% 100%, var(--s) 100%, 0 calc(100% - var(--s)), 0 0);
}

.statContent {
  z-index: 6;
  position: relative;
  padding: 10px 10px 0 26px;
  font-size: 22px;
  line-height: 1;
}

.statRowBackground {
  --b: 5px;
  /* border */
  --s: 15px;
  /* size of the cut */
  --s2: 30px;
  /* size of the cut */
  --c: #fff;

  opacity: .5;

  width: 100%;
  height: 100%;

  top: 0;
  left: 0;

  position: absolute;

  background: green;

  border: var(--b) solid var(--c);
  border-right: none;
  border-radius: 0;

  background: linear-gradient(45deg, var(--c) calc(0.707*var(--s) + var(--b)), #0000 0) border-box;
  background-color: grey;

  clip-path: polygon(100% 0, 100% 100%, var(--s) 100%, 0 calc(100% - var(--s)), 0 0);

}








.statBoxBackground {
  --b: 5px;
  /* border */
  --s: 15px;
  /* size of the cut */
  --s2: 30px;
  /* size of the cut */
  --c: #fff;

  position: absolute;


  opacity: .5;

  width: 100%;
  height: 100%;

  top: 0;
  left: 0;


  border: var(--b) solid var(--c);
  border-radius: 0;

  background: linear-gradient(-135deg, var(--c) calc(0.707*var(--s) + var(--b)), #0000 0) border-box,
    linear-gradient(45deg, var(--c) calc(0.707*var(--s2) + var(--b)), #0000 0) border-box;
  background-color: #000;

  clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% var(--s), 100% 100%, var(--s2) 100%, 0 calc(100% - var(--s2)));

}

body {
  background-image: url(https://picsum.photos/id/104/200/200);
  background-size: cover;
  font-family: 'Teko', sans-serif;  
  color: #fff;
}