JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
<h2>Детали заказа</h2>
<time>время</time>
<p>Текстовое поле</p>
<p>Текстовое поле</p>
<p>Текстовое поле</p>
<p>Текстовое поле</p>
</div>

<div class="up">
       <div class="gg g1">
        <div class="gg g2">
        <div class="gg g3">
        <h2>Детали заказа</h2>
<time>время</time>
<p>Текстовое поле</p>
<p>Текстовое поле</p>
<p>Текстовое поле</p>
<p>Текстовое поле</p>
        </div></div></div>
        </div>

<p class="go-checkout"><input type="submit" name="checkout" class="button" value="Оформить заказ" /></p>

CSS

.block {
    position: relative;
    border: 1px solid #000;
    width: 200px; 
    background: #fff;
}

.block:after {
    position: absolute;
    width: 100%;
    top: -4px;
    
    right: -4px;
    border: 1px solid red;
    content: '';
    background: #fff;
}
.up {width: 20%; margin: 50px auto;}
.gg {outline: 1px solid #ccc; background: #fff; position: relative;}
.g1, .g2 {height: inherit; content: ""; }
.g1 {z-index: 3; top: -4px; left: -4px;}
.g2 {z-index: 4; top: -2px; left: -2px;}
.g3 {width: 100%; z-index: 5; top: -2px; left: -2px;}
.g3 h2, .g3 p {padding: 5px; }
.go-checkout {text-align: center;}
.go-checkout input {
padding: 8px 11px;
cursor: pointer;
position: relative;
font-weight: 600;
font-size: 18px;
background: #1F8DD6;
border: none;
    color: white;}
.go-checkout input:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid #1F8DD6;
   border-bottom: 13px solid transparent;
}

JavaScript

Вот вся соль