UI Lab
SectionsSitesAbout
SectionsSitesAbout
UI Lab
SectionsSitesAbout

AIが生成するモダンUIセクションのギャラリー。 Next.js + Tailwind CSSのコードをコピーして、すぐに導入できます。

2026 UI Lab

Back to Sections
  1. ホーム
  2. Sections
  3. 統計
  4. ラージ統計
統計

ラージ統計

大きな数字で表示する統計セクション

#タイポグラフィ重視#フルワイド
Preview
Preview
Code
tsx(69 lines)
1// コーナードット装飾コンポーネント
2function CornerDots({ className = "" }: { className?: string }) {
3 return (
4 <div className={`absolute h-3 w-3 ${className}`}>
5 <div className="absolute left-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
6 <div className="absolute right-0 top-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
7 <div className="absolute bottom-0 left-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
8 <div className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-muted-foreground/40" />
9 </div>
10 );
11}
12
13export function StatsLarge001() {
14 const stats = [
15 { value: "10M+", label: "Active Users" },
16 { value: "99.9%", label: "Uptime" },
17 { value: "150+", label: "Countries" },
18 ];
19
20 return (
21 <section className="relative bg-background py-32">
22 {/* コーナードット装飾 */}
23 <CornerDots className="left-6 top-6" />
24 <CornerDots className="right-6 top-6" />
25 <CornerDots className="bottom-6 left-6" />
26 <CornerDots className="bottom-6 right-6" />
27
28 <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
29 {/* ヘッダー */}
30 <div className="text-center">
31 <p className="text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
32 By The Numbers
33 </p>
34 </div>
35
36 {/* 大きな統計数値 */}
37 <div className="mt-16 grid grid-cols-1 gap-12 md:grid-cols-3">
38 {stats.map((stat, index) => (
39 <div
40 key={index}
41 className="group relative border-t border-border pt-8 text-center transition-all hover:border-muted-foreground"
42 >
43 {/* 数値 */}
44 <p className="text-6xl font-extralight tracking-wider text-foreground sm:text-7xl md:text-8xl">
45 {stat.value}
46 </p>
47
48 {/* ラベル */}
49 <p className="mt-6 text-xs font-medium uppercase tracking-[0.3em] text-muted-foreground">
50 {stat.label}
51 </p>
52
53 {/* ホバー時のドット */}
54 <div className="absolute left-1/2 top-0 h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
55 </div>
56 ))}
57 </div>
58
59 {/* キャプション */}
60 <div className="mt-20 text-center">
61 <p className="mx-auto max-w-lg text-sm leading-relaxed tracking-wide text-muted-foreground">
62 Trusted by developers and teams worldwide. Our infrastructure
63 handles billions of requests every day.
64 </p>
65 </div>
66 </div>
67 </section>
68 );
69}
Related SectionsView all
アニメーション統計
View Details

統計

アニメーション統計

#アニメーション#インタラクティブ
アイコン付き統計
View Details

統計

アイコン付き統計

#グリッドレイアウト#ホバーエフェクト+1
ミニマル統計
View Details

統計

ミニマル統計

#ミニマル#グリッドレイアウト
グリッド統計
View Details

統計

グリッド統計

#グリッドレイアウト#ホバーエフェクト