JSFiddle - React, Tailwind, and code Playground
HTML
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa incidunt voluptatum laborum suscipit. Vel voluptas veritatis blanditiis rerum rem magni dolores ratione corporis vitae repellat fugit, neque porro fugiat adipisci, dolore necessitatibus laudantium asperiores in excepturi explicabo, delectus. Dolorum quod voluptatem provident assumenda aperiam nemo nam expedita. Saepe, libero illo nihil cum sed, esse aspernatur veniam architecto non ipsum molestias autem perspiciatis quae odit facere voluptate officia voluptas inventore eveniet et. Sint tempore quas praesentium facere, veritatis magni soluta architecto aperiam voluptatum consectetur, adipisci dolorum nisi quod provident numquam in cum aliquam ipsa alias hic, nobis quidem reiciendis harum minima ipsum! Vel illum, quibusdam autem ratione in delectus officia, distinctio incidunt veritatis nobis voluptate ab labore iste, eos eligendi alias. Culpa veniam nam voluptatem suscipit expedita incidunt, animi, ab ut tempora nihil? Aperiam, molestias ipsum veniam mollitia officiis modi molestiae consectetur facere obcaecati tempora dicta dignissimos nisi, quidem ullam cumque blanditiis totam. Ab nisi dolorem, eligendi nemo qui debitis, consequatur magnam iste totam nesciunt maiores laudantium veniam soluta similique laborum quae in iusto enim, nam fugit porro temporibus magni numquam. Praesentium, odio necessitatibus. Beatae deserunt libero distinctio incidunt expedita veritatis nemo ea dicta, aspernatur recusandae sit vel qui excepturi! Esse.</div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
padding: 40px;
font-family: 'Neucha', cursive;
}
div {
width: 80%;
padding: 40px;
margin: auto;
background:
linear-gradient(to bottom, black 20px, transparent 20px, transparent 24px, black 24px, black calc(100% - 24px), transparent calc(100% - 24px), transparent calc(100% - 20px), black calc(100% - 20px)) no-repeat 24px 0 / 1px 100%,
linear-gradient(to bottom, black 20px, transparent 20px, transparent 24px, black 24px, black calc(100% - 24px), transparent calc(100% - 24px), transparent calc(100% - 20px), black calc(100% - 20px)) no-repeat right 24px top 0/ 1px 100%,
linear-gradient(to right, black 20px, transparent 20px, transparent 24px, black 24px, black calc(100% - 24px), transparent calc(100% - 24px), transparent calc(100% - 20px), black calc(100% - 20px)) no-repeat top 24px left 0/ 100% 1px,
linear-gradient(to right, black 20px, transparent 20px, transparent 24px, black 24px, black calc(100% - 24px), transparent calc(100% - 24px), transparent calc(100% - 20px), black calc(100% - 20px)) no-repeat bottom 24px left 0/ 100% 1px;
}