Home/Explore/

Feature comparison

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<div style="
    align-items: center;
    display: flex;

    /* Bottom border */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);

    /* Spacing */
    padding: 12px 0px;
">
    <!-- Feature name -->
    <div style="
        /* Take available width */
        flex: 1;

        /* Spacing */
        margin-right: 16px;
    ">
        ...
    </div>

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

        /* Spacing */
        margin-right: 16px;
    ">
        <!--
        For the first row: display the model name (Basic, Pro, etc.)
        From the second row: display a yes/no icon indicating the feature is available or not
        -->
        ...
    </div>

    <!-- Repeated other models -->
    ...
</div>

<!-- Repeated items -->
...

Related patterns

Feature list

Pricing table

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