JSFiddle - React, Tailwind, and code Playground

by Олег

HTML

<div class="wrapper">
   <div class="left">
   <h1>Тест</h1>
   <hr>
   Тест Тест Тест Тест Тест Тест
   </div>
   <div class="right">
   <h1>Тест</h1>
   <hr>
    Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест Тест
   </div>
   
</div>

CSS

.wrapper{
  margin:0 auto;
  background:#000;
  padding:20px;
  position:absolute;;
  
}
.left{
  padding-top:60px;
  width:200px;
  height:300px;
  background:#fff;
  position:relative;
  float:left;
}
.left:before{
    content: '';
    position: absolute;
    top:0;
    
    border-left:solid 30px #000;
    border-top:solid 30px #000; 
    border-right:solid 30px rgba(122, 139, 185, 1);
    border-bottom:solid 30px rgba(122, 139, 185, 1);
    box-shadow:5px 7px 9px 0px rgba(122, 139, 185, 1);
}
.left:after{
    content: '';
    right:0;
    top:0;
    position: absolute;
    border-right:solid 30px #000;
    border-top:solid 30px #000; 
    border-left:solid 30px rgba(122, 139, 185, 1);
    border-bottom:solid 30px rgba(122, 139, 185, 1);
    box-shadow:-5px 7px 9px 0 rgba(122, 139, 185, 1);
    
}
.right{
  padding-top:60px;
  width:200px;
  height:300px;
  background:#fff;
  position:relative;
  float:right;
  margin-left:20px;
}
.right:before{
    content: '';
    top:0;
    position: absolute;
    border-left:solid 30px #000;
    border-top:solid 30px #000; 
    border-right:solid 30px rgba(122, 139, 185, 1);
    border-bottom:solid 30px rgba(122, 139, 185, 1);
    box-shadow:5px 7px 9px 0px rgba(122, 139, 185, 1);
}
.right:after{
    content: '';
    right:0;
    top:0;
    position: absolute;
    border-right:solid 30px #000;
    border-top:solid 30px #000; 
    border-left:solid 30px rgba(122, 139, 185, 1);
    border-bottom:solid 30px rgba(122, 139, 185, 1);
    box-shadow:-5px 7px 9px 0 rgba(122, 139, 185, 1);
    
}