JSFiddle - React, Tailwind, and code Playground

by edmundw

HTML

<script src="https://i.postimg.cc/jDn9G5wH/Textbox-Top-Left.png"></script>
<script src="https://i.postimg.cc/qtfY0Ty9/Textbox-Top-Middle.png"></script>
<script src="https://i.postimg.cc/8FhYz0bs/Textbox-Top-Right.png"></script>
<script src="https://i.postimg.cc/ZCM273RY/Textbox-Center.png"></script>
<script src="https://i.postimg.cc/kD70BqzC/Textbox-Bottom-Left.png"></script>
<div className='textbox-container'>
  <div className='top-block'>
    <div className='left-block' />
    <div className='middle-block'>
      <p>
        Top Block
      </p>
    </div>
    <div className='right-block' />
  </div>
  
  <div className='center-block'>
    <p>
      Center Block
    </p>
  </div>
  
  <div className='bottom-block'>
    <div className='left-block' />
    <div className='middle-block'>
      <p>
        Bottom Block
      </p>
    </div>
    <div className='right-block' />
  </div>
</div>

CSS

.textbox-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 75%;
    margin: 0 auto;
  }

  .top-block {
    display: inline-flex;
    flex-direction: row;
    float: left;
    width: 100%;
    height: 80px;
    margin: 0 auto;
    margin-top: 10vh;
  }

  .top-block .left-block {
    background-image: url(https://i.postimg.cc/jDn9G5wH/Textbox-Top-Left.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 80px;
    margin: 0 auto;
  }

  .top-block .middle-block {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: right;
    vertical-align: middle;
    background-image: url(https://i.postimg.cc/qtfY0Ty9/Textbox-Top-Middle.png);
    color: #fff;
    margin: 0 auto;
  }
  
  .top-block .right-block {
    float: right;
    background-image: url(https://i.postimg.cc/8FhYz0bs/Textbox-Top-Right.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 150px;
    height: 80px;
    margin: 0 auto;
  }

  .center-block {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 800px;
    background-image: url(https://i.postimg.cc/ZCM273RY/Textbox-Center.png);
    background-repeat: repeat-y;
    background-size: contain;
    margin: 0;
  }

  .bottom-block {
    display: inline-flex;
    flex-direction: row;
    float: left;
    width: 100%;
    height: 80px;
    margin-bottom: 20vh;
  }

  /* Close but no cigar with magic numbers in bot sections: */
  .bottom-block .left-block {
    width: 220px;
    height: 80px;
    background-image: url(https://i.postimg.cc/kD70BqzC/Textbox-Bottom-Left.png);
  }

  .bottom-block .middle-block {
    width: 100%;
    line-height: 80px;
    text-align: right;
    padding-right: 5vw;
    vertical-align: middle;
    height: 80px;
    background-image: url(https://i.postimg.cc/CdJW89pq/Textbox-Bottom-Middle.png);
    color: #fff;
    margin: none;
 ...