Wizard

<div class="wizard">
    <!-- Step -->
    <div class="wizard__step">
        <div class="wizard__dot">
            <!-- The left connector -->
            <div class="wizard__connector"></div>

            <!-- The step number -->
            <div class="wizard__number">
                ...
            </div>

            <!-- The right connector -->
            <div class="wizard__connector"></div>
        </div>

        <!-- Title of step -->
        ...
    </div>

    <!-- Repeat other steps -->
    ...
</div>

.wizard {
                        display: flex;
                    }

                    .wizard__step {
                        /* Make all steps have the same width */
                        flex: 1;
                    }

                    .wizard__dot {
                        /* Center the content */
                        align-items: center;
                        display: flex;
                        justify-content: center;
                    }

                    .wizard__connector {
                        flex: 1;
                        height: 1px;
                        background-color: rgba(0, 0, 0, 0.3);
                    }

                    .wizard__step:first-child .wizard__connector,
                    .wizard__step:last-child .wizard__connector {
                        background-color: transparent;
                    }

                    .wizard__number {
                        /* Center the content */
                        align-items: center;
                        display: flex;
                        justify-content: center;

                        /* Rounded border */
                        background-color: rgba(0, 0, 0, 0.3);
                        border-radius: 9999px;
                        height: 32px;
                        width: 32px;

                        /* OPTIONAL: Spacing between it and connectors */
                        margin-left: 4px;
                        margin-right: 4px;
                    }