JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<div class="box"></div>

CSS

.box {
    height: 300px;
    width: 100px;
    border: 10px solid transparent;
    border-right: 10px solid blue;
    border-bottom: 10px solid blue;
    background-image:
    linear-gradient(to bottom, #22b8cb, #0a6bba),
    linear-gradient(to right, #22b8cb, #0a6bba);
  background-size: 10px 100%, 100% 10px;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  background-clip: border-box;
}