JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}


div {
  width: 30%;
  height: 80%;
  margin: 10%;
  border: 3px solid transparent;
  border-image: linear-gradient(to bottom,#adf2f7 calc(50% - 70px),  transparent calc(50% - 40px), transparent calc(50% + 40px), #adf2f7  calc(50% + 70px));
  border-image-slice: 1;
}