JSFiddle - React, Tailwind, and code Playground

by eget teteete

HTML

<div class="outer">
  <div class="inner">
    <button class="btn">
      text
    </button>
  </div>
</div>

CSS

.outer{
  width:200px;
  height:400px;
  border-left:2px solid #333;
  border-right:2px solid #333;
  margin:auto;
  position:relative;
}
/* 
.outer:before{
  content:"";
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width:50px;
  height:2px;
  background:#333;
}
.outer:after{
  content:"";
  display:block;
  position:absolute;
  bottom:0;
  right:0;
  width:50px;
  height:2px;
  background:#333;
}
.inner{
  width:100%;
  height:100%;
}
.inner:before{
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:2px;
  background:#333;
}
.inner:after{
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  width:50px;
  height:2px;
  background:#333;
}
.btn{
  box-sizing:border-box;
  position:absolute;
  display:block;
  width:80px;
  padding:5px 10px;
  font-size:20px;
  line-height:1;
  bottom:-15px;
  left:50%;
  margin-left:-40px;
} */