JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="border-box">
  <div class="level-top"></div>
  <div class="level-center">

    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad blanditiis itaque consequatur, illum quibusdam facere, dolorem sint placeat asperiores laboriosam. Ex magni et natus quidem iste, hic quibusdam adipisci facere.</p>

      <p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.</p>

      <p>Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </div>

  </div>
  <div class="level-bottom"></div>
</div>

SCSS

$border-height: 80px;
$border-width: $border-height;

body {
  padding: 10%;
}

.border-box {
  .level {
    &-top,
    &-center,
    &-bottom {
      position: relative;
      padding-left: $border-width;
      padding-right: $border-width;

      &:before,
      &:after {
        position: absolute;
        display: block;
        height: $border-height;
        width: $border-width;
        
        content: '';
      }
    }
    
    &-top {
      height: $border-height;

      background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx//2wBDAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCABQAAgDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAcCCP/EAB4QAQABAgcAAAAAAAAAAAAAAAABAgMEExdSVZGT/8QAGAEBAAMBAAAAAAAAAAAAAAAAAAEEBQL/xAAbEQEAAQUBAAAAAAAAAAAAAAAAEQEEExRRgf/aAAwDAQACEQMRAD8A6nhz4JXrHjeIv+dTI2Lji1ioqWTb2x014VpbSgSAAAAAP//Z') repeat-x;      

      &:before {
        left: 0;
        top: 0;
        
        background:...