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

Presence indicator

<div style="
    position: relative;
">
    <!-- Other element such as avatar -->
    ...

    <!-- The presense indicator -->
    <div style="
        /* Shown at the bottom right corner */
        bottom: 0,
        position: absolute;
        right: 0;
        transform: translate(50%, 50%);

        /* Rounded border */
        border-radius: 9999px;
        height: 16px;
        width: 16px;

        /* Background color */
        background-color: #FF4136;
    " />
</div>

Related patterns

Avatar

1
2
3

Avatar list

Docked at corner

PN

Initial avatar

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