JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<div class="block">
  <h4 class="block__title">Lorem ipsum dolor</h4>
  <p class="block__text">Eos sed autem aspernatur ullam totam quod deleniti, corrupti incidunt. Et, ab magni minus non ullam at deserunt quasi, tempore. Natus sit assumenda, delectus tempore et sint ex, quae nam suscipit possimus excepturi! Nobis minus in iste iure fugit
    voluptatum, velit soluta, placeat nostrum excepturi veritatis temporibus vitae obcaecati commodi culpa reprehenderit adipisci, atque. Officia?</p>
</div>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5)),
    url('https://source.unsplash.com/E1GqYJFnXoU/900x900');
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
  padding: 25px;
  color: #fff;
}

.block {
  position: relative;
  text-align: center;
  border: 41px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='123' height='123' fill='none' stroke='%23FFF323' stroke-width='2'%3E%3Cdefs%3E%3CclipPath id='clip'%3E%3Cpolygon points='82 0 82 61 41 61 41 0 0 0 0 123 123 123 123 0 82 0'/%3E%3C/clipPath%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse'%3E%3CfeDropShadow dx='0' dy='0' flood-color='%23FFF323' stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cg clip-path='url(%23clip)'%3E%3Crect filter='url(%23blur)' x='5' y='5' width='113' height='113' rx='36'/%3E%3C/g%3E%3C/svg%3E");
  border-image-slice: 41;
  border-image-repeat: repeat;
}

.block__title {
  display: flex;
  font-size: 2rem;
  line-height: 1;
  margin-top: calc(-41px - 1rem);
  margin-bottom: 1rem;
}

.block__title::before,
.block__title::after {
  content: '';
  flex: 1;
  height: 2px;
  margin-top: 1rem;
  border-top: 10px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='123' height='123' fill='none' stroke='%23FFF323' stroke-width='2'%3E%3Cdefs%3E%3CclipPath id='clip'%3E%3Crect width='123' height='123'/%3E%3C/clipPath%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse'%3E%3CfeDropShadow dx='0' dy='0' flood-color='%23FFF323' stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cg clip-path='url(%23clip)'%3E%3Cline filter='url(%23blur)' x1='0' y1='5'...