CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Wizard

<div style="
    display: flex;
">
    <!-- Step -->
    <div style="
        /* Make all steps have the same width */
        flex: 1;
    ">
        <div style="
            /* Center the content */
            align-items: center;
            display: flex;
            justify-content: center;
        ">
            <!-- The left connector -->
            <div style="
                flex: 1;
                height: 1px;

                background-color: rgba(0, 0, 0, .3);
                /*
                For the first step, you might need to set it to transparent background:
                background-color: transparent;
                */
            " />

            <!-- The step number -->
            <div style="
                /* Center the content */
                align-items: center;
                display: flex;
                justify-content: center;

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

                /* OPTIONAL: Spacing between it and connectors */
                margin-left: 4px;
                margin-right: 4px;
            ">
                ...
            </div>

            <!-- The right connector -->
            <div style="
                flex: 1;
                height: 1px;

                background-color: rgba(0, 0, 0, .3);
                /*
                For the last step, you might need to set it to transparent background:
                background-color: transparent;
                */
            " />
        </div>

        <!-- Title of step -->
        ...
    </div>
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!