JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div class="path"></div>

<div class="path down"></div>

CSS

body {
    background-color: lightblue;
}

.path {
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 100px;
    margin: 20px;
    background-color: rgba(0,0,0,.1);
}

.path:before,
.path:after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border: 1px solid #333;
    border-width: 0 1px 1px 0;
}

.path:after {
    top: 0;
    right: -1px;
    bottom: auto;
    left: auto;
    border-width: 1px 0 0 1px;
}

.down:before {
    top: 0;
    bottom: auto;
    border-width: 1px 1px 0 0;
}

.down:after {
    top: auto;
    bottom: 0;
    border-width: 0 0 1px 1px;
}

JavaScript

$('.path').delay(2000).animate({width: 300, height: 200}, 1000);