JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="title">
  <h1>Judul Artikel</h1>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  width: fit-content;
  padding: 8px 16px;
  margin-top: 16px;
  border: 3px solid;
  position:relative;
      &::before {
      content:"";
      position: absolute;
      left: -2%;
      height: 60%;
      right: 0%;
      width: 99%;
      top: 10%;
      bottom: 0;
      border: 5px solid white;
    }
    &::after {
      content:"";
      position: absolute;
      top: -5%;
      width: 90%;
      bottom: 0%;
      height: 95%;
      left: 2%;
      right: 5%;
      border: 5px solid white;
    }
  h1 {
    margin:0;
  }
}