body {
    font-family: Arial, sans-serif;
}

.custom-container {
    width: 50%;
    margin: auto;
    text-align: center;
}

.custom-progressbar {
    display: flex;
    justify-content: space-between;
    counter-reset: custom-step;
    padding: 0;
    list-style: none;
}

    .custom-progressbar li {
        position: relative;
        text-align: center;
        flex: 1;
        cursor: pointer;
    }

        .custom-progressbar li::before {
            content: counter(custom-step);
            counter-increment: custom-step;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ddd;
            display: block;
            text-align: center;
            margin: 0 auto 10px auto;
            border-radius: 50%;
            background-color: #fff;
        }

        .custom-progressbar li::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #ddd;
            top: 15px;
            left: -50%;
            z-index: -1;
        }

        .custom-progressbar li:first-child::after {
            content: none;
        }

        .custom-progressbar li.custom-active::before, .custom-progressbar li.custom-active::after {
            background-color: #4caf50;
            color: white;
        }

.custom-tab-pane {
    display: none;
}

    .custom-tab-pane.custom-active {
        display: block;
    }