通知フィードリスト

<ul class="d10-03-08-list">
          <li class="d10-03-08-item d10-03-08-unread">
            <span class="d10-03-08-dot"></span>
            <span class="d10-03-08-ic" style="--g1:#ff6b8b;--g2:#ff8e53"><svg viewBox="0 0 24 24" width="14" height="14" fill="#fff"><path d="M12 21s-7-4.6-9.3-8.4C1 9.3 2.7 6 6 6c2 0 3.2 1.2 4 2.3C10.8 7.2 12 6 14 6c3.3 0 5 3.3 3.3 6.6C19 16.4 12 21 12 21z"/></svg></span>
            <p class="d10-03-08-txt"><b>Mika</b>があなたの投稿にいいねしました</p>
          </li>
          <li class="d10-03-08-item d10-03-08-unread">
            <span class="d10-03-08-dot"></span>
            <span class="d10-03-08-ic" style="--g1:#6a8bff;--g2:#8a6cff"><svg viewBox="0 0 24 24" width="14" height="14" fill="#fff"><path d="M21 6h-2v9H7v2c0 .55.45 1 1 1h10l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/></svg></span>
            <p class="d10-03-08-txt"><b>Ren</b>がコメントしました</p>
          </li>
          <li class="d10-03-08-item">
            <span class="d10-03-08-dot"></span>
            <span class="d10-03-08-ic" style="--g1:#84fab0;--g2:#8fd3f4"><svg viewBox="0 0 24 24" width="14" height="14" fill="#fff"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg></span>
            <p class="d10-03-08-txt"><b>Yuki</b>があなたをフォローしました</p>
          </li>
        </ul>

.d10-03-08 .d10-03-08-list{width:240px;list-style:none;font-size:12px}
        .d10-03-08 .d10-03-08-item{position:relative;display:flex;align-items:center;gap:9px;padding:9px 10px 9px 16px;border-radius:10px;transition:background .2s;cursor:pointer}
        .d10-03-08 .d10-03-08-item:hover{background:#f2f5fb}
        .d10-03-08 .d10-03-08-dot{position:absolute;left:5px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:transparent}
        .d10-03-08 .d10-03-08-unread .d10-03-08-dot{background:#6a8bff}
        .d10-03-08 .d10-03-08-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--g1),var(--g2))}
        .d10-03-08 .d10-03-08-txt{color:#444;line-height:1.5}
        .d10-03-08 .d10-03-08-txt b{color:#222}