Gaming Esports
Black with lime/cyan/pink/orange neon per rank, angular clip-path cards with blade-in entrance animation, scanline overlay, KD ratio / win rate stats, scoreboard-style score card, and rank badges. Use case: gaming coaching / esports platform. Barlow Condensed for headlines, Share Tech Mono for stats.
Gaming Esports the 10th of 15 designs in the 15 CSS Testimonials & Reviews collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tm-gam" aria-label="Player reviews">
<header class="tm-gam-hdr">
<div class="tm-gam-game-logo"><span class="tm-gam-g1">APEX</span><span class="tm-gam-g2">REVIEWS</span></div>
<div class="tm-gam-live-badge">
<span class="tm-gam-lb-dot" aria-hidden="true"></span>
<span>Live · 3,420 online</span>
</div>
</header>
<div class="tm-gam-grid">
<article class="tm-gam-card tm-gam-cl tm-gam-feat">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Legendary · MVP</div>
<div class="tm-gam-kd-row">
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">4.2</div><div class="tm-gam-kd-lbl">K/D ratio</div></div>
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">94%</div><div class="tm-gam-kd-lbl">Win rate</div></div>
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">3,800</div><div class="tm-gam-kd-lbl">Hours played</div></div>
</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">I've been competing for seven years across four different titles. The coaching subscription changed my fundamentals in <b>eight sessions</b>. Got to Champion rank for the first time ever. My duo still doesn't believe I'm the same player. Neither do I, honestly.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">GR</span>
<span><cite class="tm-gam-an">GhostRaze</cite><span class="tm-gam-ar">Top 500 · NA Server</span></span>
</figcaption>
</article>
<div class="tm-gam-col">
<article class="tm-gam-card tm-gam-cc">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Diamond</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">The ping optimization guide alone dropped me from <b>74ms to 18ms</b>. Games feel completely different.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">VX</span>
<span><cite class="tm-gam-an">VoidShift.exe</cite><span class="tm-gam-ar">Diamond I · EU</span></span>
</figcaption>
</article>
<div class="tm-gam-score-card">
<div class="tm-gam-sc-big">9.9</div>
<div class="tm-gam-sc-sub">Platform score · 42K reviews</div>
<div class="tm-gam-sc-row">
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">42K</div><div class="tm-gam-sc-lbl">Reviews</div></div>
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">98%</div><div class="tm-gam-sc-lbl">Recommend</div></div>
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">3.2M</div><div class="tm-gam-sc-lbl">Players</div></div>
</div>
</div>
</div>
</div>
<div class="tm-gam-grid2">
<article class="tm-gam-card tm-gam-cp">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Platinum</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Went from Silver to <b>Platinum in 30 days</b>. The ranked roadmap is the most structured improvement plan I've seen outside of pro orgs.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">NK</span>
<span><cite class="tm-gam-an">NightKitsune</cite><span class="tm-gam-ar">Platinum III · APAC</span></span>
</figcaption>
</article>
<article class="tm-gam-card tm-gam-co">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Gold</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Hardware recommendations boosted my FPS by <b>140 frames</b>. My reaction time measurably improved in a week. Actual game changer.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">BB</span>
<span><cite class="tm-gam-an">ByteBomber</cite><span class="tm-gam-ar">Gold I → Diamond</span></span>
</figcaption>
</article>
<article class="tm-gam-card tm-gam-cl">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Champion</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Just signed my first <b>semi-pro contract</b>. The mental coaching section was the piece I didn't know I needed. Clutch factor went through the roof.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">TR</span>
<span><cite class="tm-gam-an">TitanRise</cite><span class="tm-gam-ar">Pro contender · NA</span></span>
</figcaption>
</article>
</div>
</section> /* Gaming Esports — angled clip-path cards with blade-in entrance.
Scanline overlay sits on each card via ::before. Four neon palette
modifiers (cl=lime, cc=cyan, cp=pink, co=orange) drive accents per
rank tier. Hexagon avatars via clip-path. */
.tm-gam {
--tm-gam-bg: #0a0a0f;
--tm-gam-card: #0e0e16;
--tm-gam-lime: #c8ff00;
--tm-gam-cyan: #00ffee;
--tm-gam-pink: #ff0055;
--tm-gam-orange: #ff6a00;
--tm-gam-white: #e8e8f0;
--tm-gam-muted: #5a5a78;
--tm-gam-border: rgba(200,255,0,0.12);
position: relative;
padding: clamp(28px, 4vw, 44px);
background: var(--tm-gam-bg);
background-image:
linear-gradient(rgba(200,255,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,255,0,0.04) 1px, transparent 1px);
background-size: 40px 40px;
font-family: 'Rajdhani', system-ui, sans-serif;
color: var(--tm-gam-white);
min-height: 520px;
overflow: hidden;
}
.tm-gam-hdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
border-bottom: 1px solid var(--tm-gam-border);
padding-bottom: 18px;
flex-wrap: wrap;
gap: 12px;
}
.tm-gam-game-logo {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tm-gam-g1 { color: var(--tm-gam-lime); }
.tm-gam-g2 { color: var(--tm-gam-white); }
.tm-gam-live-badge {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 10px;
color: var(--tm-gam-pink);
text-transform: uppercase;
letter-spacing: 0.15em;
border: 1px solid rgba(255,0,85,0.3);
padding: 5px 12px;
}
.tm-gam-lb-dot {
width: 6px;
height: 6px;
background: var(--tm-gam-pink);
border-radius: 50%;
animation: tm-gam-glow 1.2s ease-in-out infinite alternate;
}
@keyframes tm-gam-glow {
from { box-shadow: 0 0 4px var(--tm-gam-pink); }
to { box-shadow: 0 0 12px var(--tm-gam-pink), 0 0 20px var(--tm-gam-pink); }
}
.tm-gam-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3px;
margin-bottom: 3px;
}
.tm-gam-col {
display: flex;
flex-direction: column;
gap: 3px;
}
.tm-gam-grid2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.tm-gam-card {
background: var(--tm-gam-card);
border: 1px solid rgba(255,255,255,0.05);
padding: 24px 22px;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
transition: all 0.3s ease;
animation: tm-gam-bladein 0.6s ease both;
display: flex;
flex-direction: column;
}
.tm-gam-card:hover {
background: #12121e;
border-color: rgba(200,255,0,0.2);
transform: translateY(-2px);
}
.tm-gam-card:hover .tm-gam-card-glow { opacity: 1; }
.tm-gam-card:nth-child(1) { animation-delay: 0.04s; }
.tm-gam-card:nth-child(2) { animation-delay: 0.10s; }
.tm-gam-card:nth-child(3) { animation-delay: 0.16s; }
@keyframes tm-gam-bladein {
from {
opacity: 0;
clip-path: polygon(0 0, 0 0, 0 16px, 0 100%, 0 100%);
}
to {
opacity: 1;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
}
.tm-gam-card-glow {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.tm-gam-cl .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(200,255,0,0.08), transparent 60%); }
.tm-gam-cc .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(0,255,238,0.06), transparent 60%); }
.tm-gam-cp .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(255,0,85,0.06), transparent 60%); }
.tm-gam-co .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(255,106,0,0.06), transparent 60%); }
.tm-gam-aline {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.tm-gam-cl .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-lime), transparent); }
.tm-gam-cc .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-cyan), transparent); }
.tm-gam-cp .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-pink), transparent); }
.tm-gam-co .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-orange), transparent); }
.tm-gam-rank {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 14px;
padding: 3px 10px;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
width: fit-content;
}
.tm-gam-cl .tm-gam-rank { background: rgba(200,255,0,0.12); color: var(--tm-gam-lime); border: 1px solid rgba(200,255,0,0.25); }
.tm-gam-cc .tm-gam-rank { background: rgba(0,255,238,0.08); color: var(--tm-gam-cyan); border: 1px solid rgba(0,255,238,0.2); }
.tm-gam-cp .tm-gam-rank { background: rgba(255,0,85,0.1); color: var(--tm-gam-pink); border: 1px solid rgba(255,0,85,0.25); }
.tm-gam-co .tm-gam-rank { background: rgba(255,106,0,0.1); color: var(--tm-gam-orange); border: 1px solid rgba(255,106,0,0.25); }
.tm-gam-kd-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.tm-gam-kd-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.tm-gam-kd-val {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 1.2rem;
line-height: 1;
}
.tm-gam-cl .tm-gam-kd-val { color: var(--tm-gam-lime); }
.tm-gam-cc .tm-gam-kd-val { color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-kd-val { color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-kd-val { color: var(--tm-gam-orange); }
.tm-gam-kd-lbl {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 8px;
color: var(--tm-gam-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.tm-gam-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
font-size: 13px;
}
.tm-gam-cl .tm-gam-stars { color: var(--tm-gam-lime); }
.tm-gam-cc .tm-gam-stars { color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-stars { color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-stars { color: var(--tm-gam-orange); }
.tm-gam-q {
font-size: 0.9rem;
line-height: 1.6;
color: rgba(232,232,240,0.7);
font-weight: 400;
margin: 0 0 18px;
font-style: normal;
flex: 1;
}
.tm-gam-feat .tm-gam-q { font-size: 1.02rem; }
.tm-gam-q b { font-weight: 700; color: var(--tm-gam-white); }
.tm-gam-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 14px;
}
.tm-gam-av {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.tm-gam-cl .tm-gam-av { background: rgba(200,255,0,0.15); color: var(--tm-gam-lime); border: 1px solid rgba(200,255,0,0.3); }
.tm-gam-cc .tm-gam-av { background: rgba(0,255,238,0.1); color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-av { background: rgba(255,0,85,0.15); color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-av { background: rgba(255,106,0,0.12); color: var(--tm-gam-orange); }
.tm-gam-an {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 14px;
font-style: normal;
letter-spacing: 0.04em;
color: var(--tm-gam-white);
line-height: 1.2;
display: block;
}
.tm-gam-ar {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-gam-muted);
margin-top: 2px;
letter-spacing: 0.05em;
}
.tm-gam-score-card {
background: linear-gradient(135deg, #0e0e16, #141420);
border: 1px solid rgba(200,255,0,0.2);
padding: 24px 22px;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
animation: tm-gam-bladein 0.6s ease 0.34s both;
}
.tm-gam-sc-big {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 900;
font-size: 3.4rem;
color: var(--tm-gam-lime);
line-height: 1;
text-shadow: 0 0 30px rgba(200,255,0,0.4);
}
.tm-gam-sc-sub {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-gam-muted);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 6px;
}
.tm-gam-sc-row {
display: flex;
gap: 22px;
margin-top: 18px;
}
.tm-gam-sc-val {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--tm-gam-white);
line-height: 1;
}
.tm-gam-sc-lbl {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 8px;
color: var(--tm-gam-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 2px;
}
.tm-gam-card::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px);
pointer-events: none;
z-index: 0;
}
@media (max-width: 820px) {
.tm-gam-grid { grid-template-columns: 1fr; }
.tm-gam-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tm-gam-card, .tm-gam-score-card { animation: none; }
.tm-gam-lb-dot { animation: none; }
.tm-gam-card:hover { transform: none; }
}