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

Slider

<div style="
    /* Content is centered horizontally */
    align-items: center;
    display: flex;

    /* Size */
    height: 32px;
">
    <!-- Left side -->
    <div style="
        /* Width based on the current value */
        height: 2px;
        width: 20%;

        /* Colors */
        background-color: rgba(0, 0, 0, .3);
    " />

    <!-- Circle -->
    <div style="
        /* Size */
        height: 32px;
        width: 32px;

        /* Rounded border */
        border-radius: 9999px;

        /* Colors */
        background-color: rgba(0, 0, 0, .3);
    " />

    <!-- Right side -->
    <div style="
        /* Take the remaining width */
        flex: 1;
        height: 2px;

        /* Colors */
        background-color: rgba(0, 0, 0, .3);
    " />
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!