<Recreated

Logsnag's Activity Feed Animation

September 10, 2023

<logsnag.com
Like
<
<div
  className='container'
  style={{
    backgroundColor: currentItem.color,
  }}
  >
  <div className='card-list'>
    {showingItems.map(({ imgSrc, date, title, name, color, id }, i) => (
      <div
        key={id}
        className='card'
        style={{
          '--i': i,
        }}
      >
        <div className='card-wrp'>
          <div className='card-left'>
            <div className='card-icon' style={{ backgroundColor: color }}>
              <img
                src={imgSrc}
                width='72'
                height='72'
                className='card-emoji'
              />
            </div>
          </div>
          <div className='card-right'>
            <p className='card-title'>{title}</p>
            <div className='card-info'>
              <p className='card-name'>{name}</p>
              <div className='card-info-separator'></div>
              <p className='card-date'>{date}</p>
            </div>
          </div>
        </div>
      </div>
    ))}
  </div>
</div>