JSFiddle - React, Tailwind, and code Playground

by glebus

HTML

<div class="btn-wrapper">
  <div class="top-left-corner top btn"></div>
  <div class="top-right-corner top btn"></div>
  <div class="center-left center btn"></div>
  <div class="center-center">
  <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text</p>
  </div>
  <div class="center-right center btn"></div>
  <div class="bottom-left-corner bottom btn"></div>
  <div class="bottom-right-corner bottom btn"></div>
</div>

CSS

.btn {
  display: inline-block;
  border: 3px solid grey;    
}
.btn-wrapper {
  display: inline-block;
  font-size: 0;
  overflow: hidden;
  height: 122px;
  width: 290px;
}
.top{
    border-top:none;
    height: 8px;
    width: 130px;
}
.btn {
    //border: 3px solid grey;
    display: inline-block;
}
.center {
    border: 3px solid grey;
    margin-top: -3px;
    width: 150px;
    height: 100px;
}
.center-left {
  border-radius:10px 0 0 10px;
  border-right: none;
  width: 15px;
}
.center-center {
  display: inline-block;
  margin-top: -3px;
  overflow:hidden;
  font-size: 14px;
  height: 100px;
  width: 250px;
}
.center-center p{
  display: table-cell;
  vertical-align:middle;
  text-align: center;
  height: inherit;
  width: inherit;
}
.center-right {
  border-radius:0 10px 10px 0;
  border-left: none;
  width: 15px;
}

.top-left-corner,
.bottom-left-corner {
   border-radius: 0 0 10px 0;
   border-left: none;
   margin-left: 10px;
}
.top-right-corner,
.bottom-right-corner{
   border-radius: 0 0 0 10px;
   border-right: none;
   margin-left: -3px;
}
.bottom{
  border-bottom:none;
  height: 8px;
  width: 130px;
  margin-top: -3px;
}
.bottom-left-corner {
   border-radius: 0 10px 0 0;
}
.bottom-right-corner {
   border-radius: 10px 0 0 0 ;
}