JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="box">
<div class="inner">

</div>
</div>

CSS

.box{
  height:150px;
  width:200px;
  /*border:2px dashed red; 
  margin:0 auto;
  position:relative;
  border-image:1px dashed green;
}
.box::after{
  content:"+";
  position:absolute;
  left: -6px;
top: -13px;
font-weight: bold;
font-size: 18px;
color: red;
}
.box .inner::after{
  content:"+";
  position:absolute;
  left: -6px;
bottom: -11px;
font-weight: bold;
font-size: 18px;
color: red;
}
.box::before{
  content:"+";
  position:absolute;
  right: -6px;
top: -13px;
font-weight: bold;
font-size: 18px;
color: red;
}
.box .inner::before{
  content:"+";
  position:absolute;
  right: -6px;
bottom: -11px;
font-weight: bold;
font-size: 18px;
color: red;
}