15 CSS Testimonials & Reviews 03 / 15

Blossom Bento

12-column bento grid with soft pastel cards, spring-bounce hover animations, and a stat panel.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="tm-ben" aria-label="Customer testimonials">

  <article class="tm-ben-card tm-ben-ca">
    <span class="tm-ben-blob" aria-hidden="true"></span>
    <div class="tm-ben-inner">
      <div>
        <span class="tm-ben-tag"><span class="tm-ben-tdot" aria-hidden="true"></span> Top Review</span>
        <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <blockquote class="tm-ben-qlg"><span class="tm-ben-qmark" aria-hidden="true">&ldquo;</span>This completely changed how I approach my morning routine. I feel more present, more intentional — honestly more like myself than I have in years.</blockquote>
      </div>
      <figcaption class="tm-ben-ar">
        <span class="tm-ben-av" aria-hidden="true">SB</span>
        <span><cite class="tm-ben-an">Sasha Bloom</cite><span class="tm-ben-aro">Yoga instructor &middot; 6 months subscriber</span></span>
      </figcaption>
    </div>
  </article>

  <article class="tm-ben-card tm-ben-cb">
    <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <blockquote class="tm-ben-qsm">"Gentle on the system, remarkable on the results. I've recommended it to my entire wellness circle."</blockquote>
    <figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">OM</span><span><cite class="tm-ben-an">Olivia Marsh</cite><span class="tm-ben-aro">Nutritionist</span></span></figcaption>
  </article>

  <article class="tm-ben-card tm-ben-cc">
    <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <blockquote class="tm-ben-qsm">"Smells like a greenhouse in the best way. My skin has never been softer or more even-toned."</blockquote>
    <figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">PE</span><span><cite class="tm-ben-an">Priya Easton</cite><span class="tm-ben-aro">Skincare obsessive</span></span></figcaption>
  </article>

  <article class="tm-ben-card tm-ben-cd">
    <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <blockquote class="tm-ben-qsm">"Fell asleep faster than I have since I was a child. The lavender formula is genuinely magical."</blockquote>
    <figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">RC</span><span><cite class="tm-ben-an">Rafael Cruz</cite><span class="tm-ben-aro">Sleep coach</span></span></figcaption>
  </article>

  <article class="tm-ben-card tm-ben-ce">
    <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    <blockquote class="tm-ben-qsm">"Finally a brand that doesn't lie about ingredients. Transparent, effective, beautiful packaging."</blockquote>
    <figcaption class="tm-ben-ar"><span class="tm-ben-av" aria-hidden="true">ZN</span><span><cite class="tm-ben-an">Zoë Nakamura</cite><span class="tm-ben-aro">Clean beauty editor</span></span></figcaption>
  </article>

  <article class="tm-ben-card tm-ben-cf">
    <span class="tm-ben-ico" aria-hidden="true">&#127807;</span>
    <div class="tm-ben-content">
      <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-ben-qsm">"The ritual of it — the scent, the texture — has become the most grounding part of my day."</blockquote>
      <figcaption class="tm-ben-ar"><span class="tm-ben-av tm-ben-av-sm" aria-hidden="true">LW</span><span><cite class="tm-ben-an">Lena Ward &middot; Therapist</cite></span></figcaption>
    </div>
  </article>

  <article class="tm-ben-card tm-ben-cg">
    <div class="tm-ben-content">
      <div class="tm-ben-stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <blockquote class="tm-ben-qsm">"Tried seventeen wellness products this year. This is the one I actually still use. Not even close."</blockquote>
      <figcaption class="tm-ben-ar"><span class="tm-ben-av tm-ben-av-sm" aria-hidden="true">MK</span><span><cite class="tm-ben-an">Maya Kim &middot; Wellness blogger</cite></span></figcaption>
    </div>
    <div class="tm-ben-right">
      <div class="tm-ben-snum">4.9</div>
      <div class="tm-ben-slbl">avg. rating<br>12,400+ reviews</div>
    </div>
  </article>

</section>
/* Blossom Bento — pastel 12-column bento grid. Self-contained. Cards
   spring-bounce in on load (staggered delays) and lift on hover with
   a soft shadow. Each card has its own accent color baked into the
   stars + avatar. The blob in card .ca is a subtle radial glow,
   contained inside the card via overflow:hidden. */
.tm-ben {
  --tm-ben-bg:    #f7f3ee;
  --tm-ben-c1:    #f9e8e0;
  --tm-ben-c2:    #e8eef5;
  --tm-ben-c3:    #e8f0e9;
  --tm-ben-c4:    #f3eaf7;
  --tm-ben-c5:    #fdf0d8;
  --tm-ben-c6:    #e5f0f0;
  --tm-ben-text:  #2a2420;
  --tm-ben-muted: #8a7e76;
  --tm-ben-a1:    #d4614a;
  --tm-ben-a2:    #4a6fa5;
  --tm-ben-a3:    #4a8a56;
  --tm-ben-a4:    #8a4ab5;
  --tm-ben-a5:    #c87c1e;
  --tm-ben-a6:    #2a8a8a;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 138px;
  gap: 11px;
  padding: clamp(20px, 3vw, 40px);
  background: var(--tm-ben-bg);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: var(--tm-ben-text);
  min-height: 500px;
}
.tm-ben-card {
  border-radius: 22px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 0.4s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  animation: tm-ben-fi 0.7s cubic-bezier(.34, 1.2, .64, 1) both;
}
.tm-ben-card:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.tm-ben-card:nth-child(1) { animation-delay: 0.05s; }
.tm-ben-card:nth-child(2) { animation-delay: 0.12s; }
.tm-ben-card:nth-child(3) { animation-delay: 0.18s; }
.tm-ben-card:nth-child(4) { animation-delay: 0.22s; }
.tm-ben-card:nth-child(5) { animation-delay: 0.28s; }
.tm-ben-card:nth-child(6) { animation-delay: 0.34s; }
.tm-ben-card:nth-child(7) { animation-delay: 0.40s; }
@keyframes tm-ben-fi {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tm-ben-ca { grid-column: 1 / 6;  grid-row: 1 / 3; background: var(--tm-ben-c1); }
.tm-ben-cb { grid-column: 6 / 9;  grid-row: 1 / 2; background: var(--tm-ben-c2); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cc { grid-column: 9 / 13; grid-row: 1 / 2; background: var(--tm-ben-c5); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cd { grid-column: 6 / 10; grid-row: 2 / 3; background: var(--tm-ben-c3); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-ce { grid-column: 10 / 13; grid-row: 2 / 3; background: var(--tm-ben-c4); display: flex; flex-direction: column; justify-content: space-between; }
.tm-ben-cf { grid-column: 1 / 5;  grid-row: 3 / 4; background: var(--tm-ben-c6); display: flex; flex-direction: row; align-items: center; gap: 18px; padding: 20px 24px; }
.tm-ben-cg { grid-column: 5 / 13; grid-row: 3 / 4; background: var(--tm-ben-c4); display: flex; flex-direction: row; align-items: center; gap: 18px; padding: 20px 24px; }
.tm-ben-blob {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tm-ben-a1) 0%, transparent 70%);
  opacity: 0.12;
  bottom: -40px;
  right: -40px;
  pointer-events: none;
}
.tm-ben-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 1px;
}
.tm-ben-ca .tm-ben-stars { color: var(--tm-ben-a1); }
.tm-ben-cb .tm-ben-stars { color: var(--tm-ben-a2); }
.tm-ben-cc .tm-ben-stars { color: var(--tm-ben-a5); }
.tm-ben-cd .tm-ben-stars { color: var(--tm-ben-a3); }
.tm-ben-ce .tm-ben-stars { color: var(--tm-ben-a4); }
.tm-ben-cf .tm-ben-stars { color: var(--tm-ben-a6); }
.tm-ben-cg .tm-ben-stars { color: var(--tm-ben-a4); }
.tm-ben-ca .tm-ben-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tm-ben-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-ben-a1);
  background: rgba(212, 97, 74, 0.1);
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 12px;
  width: fit-content;
}
.tm-ben-tdot {
  width: 5px;
  height: 5px;
  background: var(--tm-ben-a1);
  border-radius: 50%;
}
.tm-ben-qlg {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--tm-ben-text);
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.tm-ben-qmark {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 2.6rem;
  line-height: 0;
  color: var(--tm-ben-a1);
  opacity: 0.3;
  vertical-align: -0.4em;
  margin-right: 4px;
}
.tm-ben-ar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
}
.tm-ben-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.tm-ben-av-sm { width: 28px; height: 28px; font-size: 10px; }
.tm-ben-ca .tm-ben-av { background: rgba(212, 97, 74, 0.15);  color: var(--tm-ben-a1); }
.tm-ben-cb .tm-ben-av { background: rgba(74, 111, 165, 0.15); color: var(--tm-ben-a2); }
.tm-ben-cc .tm-ben-av { background: rgba(200, 124, 30, 0.15); color: var(--tm-ben-a5); }
.tm-ben-cd .tm-ben-av { background: rgba(74, 138, 86, 0.15);  color: var(--tm-ben-a3); }
.tm-ben-ce .tm-ben-av { background: rgba(138, 74, 181, 0.15); color: var(--tm-ben-a4); }
.tm-ben-cf .tm-ben-av { background: rgba(42, 138, 138, 0.15); color: var(--tm-ben-a6); }
.tm-ben-cg .tm-ben-av { background: rgba(138, 74, 181, 0.15); color: var(--tm-ben-a4); }
.tm-ben-an {
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--tm-ben-text);
  line-height: 1.3;
  display: block;
}
.tm-ben-aro {
  font-size: 10px;
  color: var(--tm-ben-muted);
  line-height: 1.4;
}
.tm-ben-qsm {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--tm-ben-text);
  margin: 7px 0;
  flex: 1;
}
.tm-ben-cf .tm-ben-content,
.tm-ben-cg .tm-ben-content { flex: 1; }
.tm-ben-cf .tm-ben-ico {
  width: 44px;
  height: 44px;
  background: rgba(42, 138, 138, 0.1);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.tm-ben-cg .tm-ben-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.tm-ben-snum {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  color: var(--tm-ben-a4);
}
.tm-ben-slbl {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-ben-muted);
  text-align: right;
}
@media (max-width: 820px) {
  .tm-ben { grid-auto-rows: auto; }
  .tm-ben-ca, .tm-ben-cb, .tm-ben-cc, .tm-ben-cd,
  .tm-ben-ce, .tm-ben-cf, .tm-ben-cg {
    grid-column: 1 / -1; grid-row: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-ben-card { animation: none; transition: none; }
  .tm-ben-card:hover { transform: none; }
}

More from 15 CSS Testimonials & Reviews

Obsidian EditorialBrutalist PressNeon Glass SaaSRetro Food ReviewAgency MinimalCrypto AuroraEdTech BrightLuxury Real EstateGaming EsportsHigh FashionFintech TrustMinimal White Cards
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →