.tabs>* {
    cursor: pointer;
    transition: all 0.3s ease;
}

.tabs>*:focus {
    outline: none;
}

.tabs>*:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    left: -1rem;
    top: 0;
    transform: scaleY(0);
    transform-origin: top;
    background-color: #fff;
    transition: all 0.3s ease;
}

.tabs>.active:before {
    transform: scaleY(1);
}

.tabs>.active {
    transform: translateX(1rem);
}