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

Pricing table

You can add a ribbon to indicate the most popular option.
<div style="
    /* Content is centered horizontally */
    align-items: center;
    display: flex;
    justify-content: center;
">
    <!-- Pricing column -->
    <div style="
        /* Content is centered vertically */
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;

        /* Make all columns have the same width */
        flex: 1;

        /* OPTIONAL: Space between columns */
        margin: 0 8px;

        /* OPTIONAL: Border */
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 4px;
    ">
        <!-- Title -->
        ...

        <!-- Price -->
        ...

        <!-- Description -->
        ...

        <!-- Button -->
        ...
    </div>

    <!-- Repeated pricing columns -->
    ...
</div>

Related patterns

Feature comparison

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!