JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="border">
<input class="" />
</div>

CSS

*{
  box-sizing:border-box;
}
.border{
  border:2px solid pink;
  border-radius:5px;
  height:34px;
  position:relative;
}
.border input{
  width:100%;
  height:30px;
  border:0;
  padding:5px 8px;
  border-radius:5px;
}
.border:after{
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  background:#fff;
  left:50%;
  top:-2px;
  margin-left:-3px;
}
.border:before{
  content:"";
  position:absolute;
  width:6px;
  height:2px;
  background:#fff;
  left:50%;
  bottom:-2px;
  margin-left:-3px;
}