<div class="cards">
  <div class="card">
  <div class="card__top">
    <div class="badge badge--red text text--upper badge--live badge--absolute">live</div>
    <div class="badge badge--gray text text--small badge--viewers badge--absolute">2.2K viewers</div>
    <img class="card__image" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_bateson87-440x248.jpg" alt="a streamer playing a game named fifa 21">
  </div>
  <div class="card__body">
    <img class="card__avatar" src="https://static-cdn.jtvnw.net/jtv_user_pictures/392b1b85-8c46-4455-a5f2-49c22bb5c4d6-profile_image-50x50.png" alt="channel's avatar"/>
    <div class="card__desc">
      <p class="text text--large text--semibold">LIGUE UUUNNNNNN TOTS! CLAIM YOUR !freepack</p>
      <p class="text text--muted">bateson87</p>
      <div class="card__tags">
        <div class="badge badge--white badge--pill text text--small">English</div>
      </div>
    </div>
    <div class="card__more">
      <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="card__icon"><g><path d="M10 18a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM8 4a2 2 0 104 0 2 2 0 00-4 0z"></path></g></svg>
    </div>
  </div>
</div>
  <div class="card">
    <div class="card__top">
      <div class="badge badge--red text text--upper badge--live badge--absolute">live</div>
      <div class="badge badge--gray text text--small badge--viewers badge--absolute">511 viewers</div>
      <img class="card__image" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_fifaanalyst-440x248.jpg" alt="a streamer playing a game named fifa 21">
    </div>
    <div class="card__body">
      <img class="card__avatar" src="https://static-cdn.jtvnw.net/jtv_user_pictures/30f1391b-5bf4-4c9a-847d-9db2d4f570fa-profile_image-50x50.png" alt="channel's avatar" />
      <div class="card__desc">
        <p class="text text--large text--semibold">FUT CHAMPS TIME! @thefifaanalyst</p>
        <p class="text text--muted">fifaanalyst</p>
        <div class="card__tags">
          <div class="badge badge--white badge--pill text text--small">English</div>
        </div>
      </div>
      <div class="card__more">
        <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="card__icon"><g><path d="M10 18a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM8 4a2 2 0 104 0 2 2 0 00-4 0z"></path></g></svg>
      </div>
    </div>
</div>
  <div class="card">
    <div class="card__top">
      <div class="badge badge--red text text--upper badge--live badge--absolute">live</div>
      <div class="badge badge--gray text text--small badge--viewers badge--absolute">57 viewers</div>
      <img class="card__image" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_ligapro7-440x248.jpg" alt="a streamer playing a game named fifa 21">
    </div>
    <div class="card__body">
      <img class="card__avatar" src="https://static-cdn.jtvnw.net/jtv_user_pictures/9860b0a4-b614-40a3-b8ef-c01750995717-profile_image-50x50.png" alt="channel's avatar"/>
      <div class="card__desc">
        <p class="text text--large text--semibold">FFUT Champions LigaPro Daily Cups</p>
        <p class="text text--muted">LigaPro7</p>
        <div class="card__tags">
          <div class="badge badge--white badge--pill text text--small">English</div>
          <div class="badge badge--white badge--pill text text--small">Tournament</div>
          <div class="badge badge--white badge--pill text text--small">League</div>
        </div>
      </div>
      <div class="card__more">
        <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="card__icon"><g><path d="M10 18a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM8 4a2 2 0 104 0 2 2 0 00-4 0z"></path></g></svg>
      </div>
    </div>
</div>
  <div class="card">
    <div class="card__top">
      <div class="badge badge--red text text--upper badge--live badge--absolute">live</div>
      <div class="badge badge--gray text text--small badge--viewers badge--absolute">698 viewers</div>
      <img class="card__image" src="https://static-cdn.jtvnw.net/previews-ttv/live_user_stokes63-440x248.jpg" alt="a streamer playing a game named fifa 21">
    </div>
    <div class="card__body">
      <img class="card__avatar" src="https://static-cdn.jtvnw.net/jtv_user_pictures/d2117bb8-d141-461f-b837-ba4fb6b56a9b-profile_image-50x50.png" alt="channel's avatar"/>
      <div class="card__desc">
        <p class="text text--large text--semibold">TOTS PRO WL!! NEW BRAZILIAN SUPERSTAR</p>
        <p class="text text--muted">stokes63</p>
        <div class="card__tags">
          <div class="badge badge--white badge--pill text text--small">English</div>
          <div class="badge badge--white badge--pill text text--small">Tournament</div>
          <div class="badge badge--white badge--pill text text--small">League</div>
        </div>
      </div>
      <div class="card__more">
        <svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="card__icon"><g><path d="M10 18a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM8 4a2 2 0 104 0 2 2 0 00-4 0z"></path></g></svg>
      </div>
    </div>
</div>
</div>
$clr-red: #E91916;
$clr-gray: #222719;
$clr-purple: #8846EB;
$clr-bg: #0E0E10;
$clr-gray2: #3E3E40;

body {
  font-family: Inter, Roobert, "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 2rem 1rem;
  background: $clr-bg;
}

img {
  width: 100%;
  height: 100%;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.card {
  max-width: 20rem;
   
  &__top {
    position: relative;
    cursor: pointer;
  }
  
  &__image {
    transition: all 250ms;
  }
  
  &__body {
    padding: 0.5rem 0.75rem 0.5rem 0;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
  }
  
  &__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
  }
  
  &__desc > * {
    margin-bottom: 0.4rem;
  }
  
  &__desc {
    .text:hover {
      color: $clr-purple;
    }
  }
  
  &__icon {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    fill: white;
    
    &:hover {
      background: darken(white, 50);
      box-shadow: 0 0 0px 4px darken(white, 50);
      border-radius: 2px;
    }
  }
  
  &__top {
    position: relative;
    background: $clr-purple;
    
    &:before, &:after {
      content: ' ';
      display: block;
      background-color: $clr-purple;
      width: 8px;
      height: 8px;
      position: absolute;
      z-index: -1;
      transition: all 250ms;
    }
    
    &:before {
      top: 0;
      left: 0;
      transform-origin: top left;
      transform: rotate(-45deg) scale(0);
    }
    
    &:after {
      right: 0;      
      bottom: 0;
      width: 10px;
      height: 10px;
      transform-origin: bottom right;
      transform: rotate(45deg) scale(0);
    }
    
    &:hover {
      &:before {
        transform: rotate(-45deg) scale(1);
      }
      
      &:after {
        transform: rotate(45deg) scale(1);
      }
      
      .badge {
        transform: translate(6px, -6px);
      }
      
      .card__image {
        transform: translate(6px, -6px);
      }
    }
  }
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  color: white;
  z-index: 2;
  transition: all 250ms;
  
  &--absolute {
    position: absolute;
  }
  
  &--red {
    background: $clr-red;
  }
  
  &--gray {
    background: $clr-gray;
  }
  
  &--white {
    font-weight: 600;
    color: darken(white, 30) !important;
    background: $clr-gray2;
    
    &:hover {
      background: darken($clr-gray2, 15);
    }
  }
  
  &--pill {
    border-radius: 15px;
  }
  
  &--live {
    top: 0.5rem;
    left: 0.3rem;
  }
  
  &--viewers {
    bottom: 0.5rem;
    left: 0.3rem;
  }
}

.text {
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  overflow: hidden; 
  white-space: nowrap;
  max-width: 25ch;
  transition: color 100ms;
  cursor: pointer;
  color: white;
  
  &--upper {
    text-transform: uppercase;
  }
  
  &--small {
    font-size: 0.75rem;
  }
  
  &--large {
    font-size: 0.875rem;
  }
  
  &--semibold {
    font-weight: 600;
  }
  
  &--muted {
    color: lighten(black, 70);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.