Home/Explore/

Status light

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<div style="
    /* Center the content */
    align-items: center;
    display: flex;
">
    <!-- Status light -->
    <div style="
        /* Background color */
        background-color: rgb(66, 153, 225);

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

        /* Size */
        height: 8px;
        width: 8px;

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

    <!-- Content -->
    <div style="
        /* Take available width */
        flex: 1;
    ">
        ...
    </div>
</div>

Use cases

In review
Draft
Published
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!