CodePen Embed - Leaderboard Example

.l-wrapper
  .c-header
    img.c-logo(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/813538/km-logo-color.svg" draggable="false")
    button.c-button.c-button--primary Send Kudos
  .l-grid
    .l-grid__item.l-grid__item--sticky
      .c-card.u-bg--light-gradient.u-text--dark
        .c-card__body
          .u-display--flex.u-justify--space-between
            .u-text--left
              .u-text--small My Rank
              h2 3rd Place
            .u-text--right
              .u-text--small My Score
              h2 24
      .c-card
        .c-card__body
          .u-text--center#winner
    .l-grid__item
      .c-card
        .c-card__header
          h3 Received Kudos
          select.c-select
            option(selected) Sunday, Feb. 23 - Sunday, Feb. 30
        .c-card__body
          ul.c-list#list
            li.c-list__item
              .c-list__grid
                .u-text--left.u-text--small.u-text--medium Rank
                .u-text--left.u-text--small.u-text--medium Team Member
                .u-text--right.u-text--small.u-text--medium # of Kudos

View Compiled

html {
  --black: #000000;
  --white: #ffffff;
  --darkest: #101010;
  --darker: #16171A;
  --dark: #A3AFBF;
  --medium: #DFE7EF;
  --light: #CAD4E1;
  --lighter: #F5F8FC;
  --lightest: var(--white);
  
  --primary: #7B16FF;
  --primary-light: #DDD9FF;
  --primary-trans: rgba(123,22,255,0.4);
  
  --yellow: #FDCB6E;
  --orange: #E17055;
  --teal: #00CEC9;
  
  --bg: var(--darkest);
  --color: var(--lightest);
  --surface: var(--darker);
}

$states: (
  light: var(--lightest),
  primary: var(--primary),
  dark: var(--darkest),
  transparent: transparent,
  medium: var(--medium),
  yellow: var(--yellow),
  orange: var(--orange),
  teal: var(--teal),
  light-gradient: linear-gradient(to top, var(--light), var(--lightest)),
);

$spacing-unit: 0.8rem;

$spacers: (
  2: $spacing-unit/4,
  4: $spacing-unit/2,
  8: $spacing-unit,
  16: $spacing-unit*2,
  24: $spacing-unit*3,
  32: $spacing-unit*4
);

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *:before,*:after {
  box-sizing: inherit;
}

html,body {
  width: 100%;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--color);
  font-size: 1.6rem;
  font-family: 'Overpass Mono', system-ui;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: $spacing-unit;
  margin-bottom: $spacing-unit;
  font-family: 'Oswald', system-ui;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: all 120ms ease-out 0s;
  display: inline-block;
  border-radius: $spacing-unit/2;
  &:hover {
    background: var(--primary-trans);
    color: var(--primary-light);
    box-shadow: 0px 0px 0px $spacing-unit/2 var(--primary-trans);
  }
}

button, textarea, input, select {
  font-family: inherit;
  color: inherit;
  &:active, &:focus {
    outline: 0;
  }
}

button,select {
  cursor: pointer;
}

.l-wrapper {
  width: 100%;
  max-width: 960px;
  margin: auto;
  padding: $spacing-unit*2 $spacing-unit*2 $spacing-unit*4;
}

.l-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: $spacing-unit*2;
  grid-row-gap: $spacing-unit*2;
  position: relative;
  @media screen and(max-width: 700px) {
    grid-template-columns: 1fr;
  }
}

.c-header {
  padding: $spacing-unit*2 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.4rem;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: $spacing-unit/4;
    background: var(--primary-trans);
  }
}

.c-card {
  border-radius: $spacing-unit;
  background: var(--surface);
  width: 100%;
  margin-bottom: $spacing-unit*2;
  box-shadow: 0px 0px 0px 1px rgba(white, 0.12);
  &__body, &__header {
    padding: $spacing-unit*3;
    @media screen and(max-width: 700px) {
      padding: $spacing-unit*1.5;
    }
  }
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0;
    @media screen and(max-width: 700px) {
      flex-direction: column;
    }
  }
}

.c-place {
  @media screen and(max-width: 700px) {
      transform: translateY(4px);
    }
}

.c-logo {
  display: inline-block;
  width: 100%;
  max-width: $spacing-unit*22;
  user-select: none;
}

.c-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  &__item {
    padding: $spacing-unit*2 0;
    .c-flag {
      margin-top: $spacing-unit;
    }
    @media screen and(max-width: 700px) {
      .c-flag {
        margin-top: $spacing-unit/2;
      }
    }
  }
  &__grid {
    display: grid;
    grid-template-columns: $spacing-unit*6 3fr 1fr;
    grid-column-gap: $spacing-unit*3;
    @media screen and (max-width: 700px) {
      grid-template-columns: $spacing-unit*4 3fr 1fr;
      grid-column-gap: $spacing-unit;
    }
  }
}

.c-media {
    display: inline-flex;
  align-items: center;
  &__content {
    padding-left: $spacing-unit*2;
    @media screen and(max-width: 700px) {
      padding-left: $spacing-unit;
    }
  }
  &__title {
    margin-bottom: $spacing-unit/2;
    @media screen and(max-width: 700px) {
      font-size: 1.4rem;
    }
  }
}

.c-avatar {
  $size: $spacing-unit*6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: $size;
  height: $size;
  box-shadow: inset 0px 0px 0px 1px currentColor;
  border-radius: 50%;
  background: var(--lightest);
  color: var(--dark);
  @media screen and (max-width: 700px) {
    $size: $spacing-unit*4;
    width: $size;
    height: $size;
  }
  &--lg {
    $size: $spacing-unit*12;
    width: $size;
    height: $size;
  }
}

.c-button {
  display: inline-block;
  background: var(--dark);
  border: 0;
  border-radius: $spacing-unit/2;
  padding: $spacing-unit*1.5 $spacing-unit*2.5;
  transition: all 120ms ease-out 0s;
  &--block {
    display: block;
    width: 100%;
  }
  &:hover, &:focus {
    filter: brightness(0.9);
  }
  &:focus {
    box-shadow: 0px 0px 0px $spacing-unit/2 var(--primary-trans);
  }
  &:active {
    box-shadow: 0px 0px 0px $spacing-unit/2 var(--primary-trans), inset 0px 0px $spacing-unit rgba(black, 0.2);
    filter: brightness(0.8);
  }
}

.c-select {
  background: transparent;
  padding: $spacing-unit*1.5;
  appearance: none;
  font-size: 1.4rem;
  border-color: rgba(white, 0.2);
  transition: all 120ms ease-out 0s;
  &:hover {
    background: var(--darkest);
  }
}

.c-flag {
  $size: $spacing-unit*4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: $size;
  height: $size;
  background: var(--lightest);
  color: var(--dark);
  border-radius: $spacing-unit/2;
  @media screen and (max-width: 700px) {
    $size: $spacing-unit*3;
    width: $size;
    height: $size;
  }
}

@each $key,$val in $states {
  .c-button--#{$key} {
    background: $val;
  }
}

.u-text--title {
  font-family: 'Oswald', system-ui;
}

.u-text {
  &--left {
    text-align: left;
  }
  &--center {
    text-align: center;
  }
  &--right {
    text-align: right;
  }
}

@each $key,$val in $states {
  .u-bg--#{$key} {
    background: $val !important;
  }
  .u-text--#{$key} {
    color: $val !important;
  }
}

.u-display--flex {
  display: flex;
}

$flex-directions: (center,flex-end,flex-start,space-between);

@each $direction in $flex-directions {
  .u-align--#{$direction} {
    align-items: $direction;
  }
  .u-justify--#{$direction} {
    justify-content: $direction;
  }
}

.u-text--small {
  font-size: 1.4rem;
}

$directions: (
  l: left,
  r: right,
  b: bottom,
  t: top
);

@each $key,$val in $spacers {
  @each $abbr,$direction in $directions {
    .u-p#{$abbr}--#{$key} {
      padding-#{$direction}: $val;
    }
    .u-m#{$abbr}--#{$key} {
      margin-#{$direction}: $val;
    }
  }
}

View Compiled

console.clear();

const team = [
  {
    rank: 1,
    name: 'Lewis Hamilton',
    handle: 'lewishamilton',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/L/LEWHAM01_Lewis_Hamilton/lewham01.png.transform/2col-retina/image.png',
    kudos: 36,
    sent: 31
  }, {
    rank: 2,
    name: 'Kimi Raikkonen',
    handle: 'kimimatiasraikkonen',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/K/KIMRAI01_Kimi_R%C3%A4ikk%C3%B6nen/kimrai01.png.transform/2col-retina/image.png',
    kudos: 31,
    sent: 21
  }, {
    rank: 3,
    name: 'Sebastian Vettel',
    handle: 'vettelofficial',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/S/SEBVET01_Sebastian_Vettel/sebvet01.png.transform/2col-retina/image.png',
    kudos: 24,
    sent: 7
  }, {
    rank: 4,
    name: 'Max Verstappen',
    handle: 'maxverstappen1',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/M/MAXVER01_Max_Verstappen/maxver01.png.transform/2col-retina/image.png',
    kudos: 22,
    sent: 4
  }, {
    rank: 5,
    name: 'Lando Norris',
    handle: 'landonorris',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/L/LANNOR01_Lando_Norris/lannor01.png.transform/2col-retina/image.png',
    kudos: 18,
    sent: 16
  }, {
    rank: 6,
    name: 'Charles Leclerc',
    handle: 'charles_leclerc',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/C/CHALEC01_Charles_Leclerc/chalec01.png.transform/2col-retina/image.png',
    kudos: 16,
    sent: 6
  }, {
    rank: 7,
    name: 'George Russell',
    handle: 'georgerussell63',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/G/GEORUS01_George_Russell/georus01.png.transform/2col-retina/image.png',
    kudos: 10,
    sent: 21
  }, {
    rank: 8,
    name: 'Daniel Ricciardo',
    handle: 'danielricciardo',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/D/DANRIC01_Daniel_Ricciardo/danric01.png.transform/2col-retina/image.png',
    kudos: 7,
    sent: 46
  }, {
    rank: 9,
    name: 'Alexander Albon',
    handle: 'alex_albon',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/A/ALEALB01_Alexander_Albon/alealb01.png.transform/2col-retina/image.png',
    kudos: 4,
    sent: 2
  }, {
    rank: 10,
    name: 'Carlos Sainz Jr.',
    handle: 'carlossainz55',
    img: 'https://www.formula1.com/content/dam/fom-website/drivers/C/CARSAI01_Carlos_Sainz/carsai01.png.transform/2col-retina/image.png',
    kudos: 1,
    sent: 24
  }
];

const randomEmoji = () => {
  const emojis = ['👏','👍','🙌','🤩','🔥','⭐️','🏆','💯'];
  let randomNumber = Math.floor(Math.random() * emojis.length);
  return emojis[randomNumber]
}

team.forEach(member => {
  let newRow = document.createElement('li');
  newRow.classList = 'c-list__item';
  newRow.innerHTML = `
    <div class="c-list__grid">
      <div class="c-flag c-place u-bg--transparent">${member.rank}</div>
      <div class="c-media">
        <img class="c-avatar c-media__img" src="${member.img}" />
        <div class="c-media__content">
          <div class="c-media__title">${member.name}</div>
          <a class="c-media__link u-text--small" href="https://instagram.com/${member.handle}" target="_blank">@${member.handle}</a>
        </div>
      </div>
      <div class="u-text--right c-kudos">
        <div class="u-mt--8">
          <strong>${member.kudos}</strong> ${randomEmoji()}
        </div>
      </div>
    </div>
  `;
  if(member.rank === 1) {
    newRow.querySelector('.c-place').classList.add('u-text--dark')
    newRow.querySelector('.c-place').classList.add('u-bg--yellow')
    newRow.querySelector('.c-kudos').classList.add('u-text--yellow')
  } else if(member.rank === 2) {
    newRow.querySelector('.c-place').classList.add('u-text--dark')
    newRow.querySelector('.c-place').classList.add('u-bg--teal')
    newRow.querySelector('.c-kudos').classList.add('u-text--teal')
  } else if(member.rank === 3) {
    newRow.querySelector('.c-place').classList.add('u-text--dark')
    newRow.querySelector('.c-place').classList.add('u-bg--orange')
    newRow.querySelector('.c-kudos').classList.add('u-text--orange')
  }
  list.appendChild(newRow)
})

// Find Winner from sent kudos by sorting the drivers in the team array
let sortedTeam = team.sort((a, b) => b.sent - a.sent)
let winner = sortedTeam[0]

// Render winner card
const winnerCard = document.getElementById('winner')
winnerCard.innerHTML = `
  <div class="u-text-small u-text--medium u-mb--16">Top Sender Last Week</div>
  <img class="c-avatar c-avatar--lg" src="${winner.img}"/>
  <h3 class="u-mt--16">${winner.name}</h3>
  <span class="u-text--teal u-text--small">${winner.name}</span>
`

View Compiled

This Pen is owned by Ryan Parag on CodePen.

See more by @ryanparag on CodePen

External CSS

https://fonts.googleapis.com/css?family=Oswald|Overpass+Mono&display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.