JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='container_border'>
<div class='container_inner'>
<h1>tiiiitle</h1> <p>hhhhh
</p> ggggg ggggg ggggg
  
</div></div>

CSS

body {background-image:url(http://griffusion.elementfx.com/pics/ui/bg-day.jpg);}
div {box-sizing:border-box;}

.container_border {width:972px;min-height:280px;padding:16px; 
border-image-slice: 34 34 34 34 fill;
border-image-width: 34px 34px 34px 34px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: round round;
border-image-source: url("http://griffusion.elementfx.com/pics/ui/borderpx.png");
position:relative;}

.container_inner {width:940px;min-height:240px;
position:absolute;top:16px;left:16px;
padding:15px;
background-image:url(https://orig00.deviantart.net/7246/f/2018/122/f/1/perchbg2_by_bronzehalo-dcagnjo.png);
background-repeat:repeat-x;
background-position:center;}