galaxy/Cards/arshshaikh06_hard-cobra-69.html

<div class="container">
  <div class="palette">
    <div class="color"><span>264653</span></div>
    <div class="color"><span>2A9D8F</span></div>
    <div class="color"><span>E9C46A</span></div>
    <div class="color"><span>F4A261</span></div>
    <div class="color"><span>E76F51</span></div>
  </div>
  <div id="stats">
    <span>53421 saves</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
      <path d="M4 7.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5S5.5 9.83 5.5 9 4.83 7.5 4 7.5zm10 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5S9.83 7.5 9 7.5z"></path>
    </svg>
  </div>
</div>
<style>
/* From Uiverse.io by arshshaikh06 - Source: https://codepen.io/arsh-shaikh/pen/ZELZwWq?editors=1100 - Tags: card, palette, ui, card hover */
.container {
  height: 200px;
  width: 350px;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 10px 20px #dbdbdb;
  font-family: sans-serif;
}

.palette {
  display: flex;
  height: 86%;
  width: 100%;
}

.color {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  letter-spacing: 1px;
  transition: flex 0.1s linear;
}

.color span {
  opacity: 0;
  transition: opacity 0.1s linear;
}

.color:nth-child(1) {
  background: #264653;
}

.color:nth-child(2) {
  background: #2a9d8f;
}

.color:nth-child(3) {
  background: #e9c46a;
}

.color:nth-child(4) {
  background: #f4a261;
}

.color:nth-child(5) {
  background: #e76f51;
}

.color:hover {
  flex: 2;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.color:hover span {
  opacity: 1;
}

#stats {
  height: 14%;
  width: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5em;
  box-sizing: border-box;
  color: #bebebe;
}

#stats svg {
  fill: #bebebe;
  transform: scale(1.2);
}
</style>