Flip Reveal Stat Card

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="flip-stat">
  <div class="flip-stat__inner">
    <div class="flip-stat__face flip-stat__face--front">
      <span class="flip-stat__value">2.4k</span>
      <span class="flip-stat__label">Active Users</span>
    </div>
    <div class="flip-stat__face flip-stat__face--back">
      <p>Grew 38% this quarter thanks to the new referral program.</p>
    </div>
  </div>
</div>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.flip-stat {
  width: 190px;
  height: 190px;
  perspective: 1000px;
}
.flip-stat__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}
.flip-stat:hover .flip-stat__inner {
  transform: rotateY(180deg);
}
.flip-stat__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-family: system-ui, sans-serif;
  color: #fff;
  background: linear-gradient(150deg, #fb7185, #ec4899);
  box-shadow: 0 16px 32px -14px rgba(236, 72, 153, 0.55);
}
.flip-stat__value {
  font-size: 34px;
  font-weight: 800;
}
.flip-stat__label {
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.9;
}
.flip-stat__face--back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, #ec4899, #a21caf);
  font-size: 13px;
  line-height: 1.5;
}