Discord Example

by Rowan Hamilton

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="guilds-wrapper">
    <div class="unread-mentions-indicator-top">
        <div class="bar-Y-RLyN center-1MLNrE flex-3B1Tl4 justifyCenter-29N31w alignCenter-3VxkQP unread-mentions-bar unread-2TDDFN active-2wuntj"
            style="transform: translateY(-150%);">
            <svg name="ArrowUp" class="icon-2qNMWC" width="24" height="24" viewBox="0 0 24 24">
                <polygon fill="currentColor" fill-rule="nonzero" points="13 20 11 20 11 8 5.5 13.5 4.08 12.08 12 4.16 19.92 12.08 18.5 13.5 13 8"></polygon>
            </svg>
        </div>
    </div>
    <div class="scroller-wrap">
        <div class="guilds scroller">
            <div class="guild">
                <div class="guild-inner" draggable="false" style="border-radius: 25px; background-color: rgb(47, 49, 54);">
                    <a draggable="false" class="" href="/channels/@me/344273891436527629">
                        <div class="friends-icon"></div>
                    </a>
                </div>
            </div>
            <div class="guild-separator"></div>
            <div class="guild">
                <div draggable="true">
                    <div class="guild-inner" draggable="false" style="border-radius: 25px;">
                        <div class="circle blend randomColor">/gif/</div>
                    </div>
                </div>
            </div>
            <div class="guild selected">
                <div draggable="true">
                    <div class="guild-inner" draggable="false" style="border-radius: 15px;">
                        <div class="circle blend randomColor">/wsg/</div>
                    </div>
                </div>
            </div>
            <div class="guild">
                <div draggable="true">
                    <div class="guild-inner" draggable="false" style="border-radius: 25px;">
                        <div class="circle blend randomColor">/g/</div>
         ...

CSS

.guilds-wrapper {
    -ms-flex-direction: column;
    -ms-flex-negative: 0;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    background-color: #202225;
    contain: layout;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 70px
}
.guilds-wrapper .scroller-wrap {
    width: 88px
}
.guilds-wrapper .guilds {
    -moz-user-select: none;
    -ms-flex: 1;
    -ms-user-select: none;
    -webkit-box-flex: 1;
    -webkit-user-select: none;
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 10px 0 10px 10px;
    user-select: none
}
.guilds-wrapper .guilds .friends-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 32px 28px;
    height: 50px;
    width: 50px
}
.guilds-wrapper .guilds .friends-online {
    color: hsla(0, 0%, 100%, .3);
    font-size: 10px;
    font-weight: 500;
    line-height: 130%;
    margin: 10px 0;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    width: 50px;
    word-wrap: normal
}
.guilds-wrapper .guilds .guild-placeholder {
    -webkit-box-sizing: border-box;
    border: 1px dashed #535559;
    border-radius: 50%;
    box-sizing: border-box
}
.guilds-wrapper .guilds .guild {
    height: 50px;
    position: relative;
    width: 50px;
    z-index: 1
}
.guilds-wrapper .guilds .guild .avatar-small {
    background-repeat: no-repeat;
    background-size: 50px 50px;
    border-radius: 0;
    height: 50px;
    margin: 0;
    width: 50px
}
.guilds-wrapper .guilds .guild .badge {
    bottom: -2px;
    pointer-events: none;
    position: absolute;
    right: -2px
}
.guilds-wrapper .guilds .guild.selected:before,
.guilds-wrapper .guilds .guild.unread:before {
    border-radius: 20px;
    content: " ";
    height: 40px;
    left: -15px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    width:...

JavaScript

var randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 

$('.randomColor').css('background-color', randomColor);