Skip to content

Commit d09be0c

Browse files
committed
feat: 会社・個人スポンサーのコンポーネントを切り出す
1 parent a1415eb commit d09be0c

File tree

2 files changed

+199
-0
lines changed

2 files changed

+199
-0
lines changed
Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<div class="mb-10">
2+
<h3 class="mb-6 text-center text-xl font-semibold md:text-2xl">
3+
企業スポンサー
4+
</h3>
5+
<div class="space-y-10">
6+
<div class="space-y-6">
7+
<h4 class="text-center text-lg font-medium">プラチナ</h4>
8+
<div class="grid grid-cols-1 justify-items-center gap-8 md:grid-cols-2">
9+
<div class="flex flex-col items-center">
10+
<div class="mb-3 flex h-24 items-center justify-center md:h-32">
11+
<img alt="Acme Inc." class="max-h-full max-w-full object-contain" />
12+
</div>
13+
<h4 class="text-base font-medium text-gray-800 md:text-lg">
14+
Acme Inc.
15+
</h4>
16+
</div>
17+
<div class="flex flex-col items-center">
18+
<div class="mb-3 flex h-24 items-center justify-center md:h-32">
19+
<img alt="TechCorp" class="max-h-full max-w-full object-contain" />
20+
</div>
21+
<h4 class="text-base font-medium text-gray-800 md:text-lg">
22+
TechCorp
23+
</h4>
24+
</div>
25+
</div>
26+
</div>
27+
<div class="space-y-6">
28+
<h4 class="text-center text-lg font-medium">ゴールド</h4>
29+
<div class="grid grid-cols-2 justify-items-center gap-6 md:grid-cols-3">
30+
<div class="flex flex-col items-center">
31+
<div class="mb-2 flex h-20 items-center justify-center md:h-24">
32+
<img
33+
alt="DevSolutions"
34+
class="max-h-full max-w-full object-contain"
35+
/>
36+
</div>
37+
<h4 class="text-sm font-medium text-gray-800 md:text-base">
38+
DevSolutions
39+
</h4>
40+
</div>
41+
<div class="flex flex-col items-center">
42+
<div class="mb-2 flex h-20 items-center justify-center md:h-24">
43+
<img
44+
alt="CodeMasters"
45+
class="max-h-full max-w-full object-contain"
46+
/>
47+
</div>
48+
<h4 class="text-sm font-medium text-gray-800 md:text-base">
49+
CodeMasters
50+
</h4>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="space-y-6">
55+
<h4 class="text-center text-lg font-medium">シルバー</h4>
56+
<div class="grid grid-cols-3 justify-items-center gap-4 md:grid-cols-4">
57+
<div class="flex flex-col items-center">
58+
<div class="mb-2 flex h-12 items-center justify-center md:h-16">
59+
<img alt="ByteWorks" class="max-h-full max-w-full object-contain" />
60+
</div>
61+
<h4 class="text-center text-xs font-medium text-gray-800 md:text-sm">
62+
ByteWorks
63+
</h4>
64+
</div>
65+
<div class="flex flex-col items-center">
66+
<div class="mb-2 flex h-12 items-center justify-center md:h-16">
67+
<img alt="EditPro" class="max-h-full max-w-full object-contain" />
68+
</div>
69+
<h4 class="text-center text-xs font-medium text-gray-800 md:text-sm">
70+
EditPro
71+
</h4>
72+
</div>
73+
<div class="flex flex-col items-center">
74+
<div class="mb-2 flex h-12 items-center justify-center md:h-16">
75+
<img alt="VimTools" class="max-h-full max-w-full object-contain" />
76+
</div>
77+
<h4 class="text-center text-xs font-medium text-gray-800 md:text-sm">
78+
VimTools
79+
</h4>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<div class="mb-8">
2+
<h3 class="mb-6 text-center text-xl font-semibold md:text-2xl">
3+
個人スポンサー
4+
</h3>
5+
<div class="rounded-lg bg-emerald-50 p-4 md:p-6">
6+
<div class="flex flex-wrap justify-center gap-4">
7+
<div class="flex flex-col items-center">
8+
<div
9+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
10+
>
11+
<img alt="田中一郎" class="h-full w-full object-cover" />
12+
</div>
13+
<span class="text-center text-xs font-medium md:text-sm">田中一郎</span>
14+
</div>
15+
<div class="flex flex-col items-center">
16+
<div
17+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
18+
>
19+
<img alt="John Doe" class="h-full w-full object-cover" />
20+
</div>
21+
<span class="text-center text-xs font-medium md:text-sm">John Doe</span>
22+
</div>
23+
<div class="flex flex-col items-center">
24+
<div
25+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
26+
>
27+
<img alt="鈴木花子" class="h-full w-full object-cover" />
28+
</div>
29+
<span class="text-center text-xs font-medium md:text-sm">鈴木花子</span>
30+
</div>
31+
<div class="flex flex-col items-center">
32+
<div
33+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
34+
>
35+
<img alt="Jane Smith" class="h-full w-full object-cover" />
36+
</div>
37+
<span class="text-center text-xs font-medium md:text-sm"
38+
>Jane Smith</span
39+
>
40+
</div>
41+
<div class="flex flex-col items-center">
42+
<div
43+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
44+
>
45+
<img alt="佐藤健太" class="h-full w-full object-cover" />
46+
</div>
47+
<span class="text-center text-xs font-medium md:text-sm">佐藤健太</span>
48+
</div>
49+
<div class="flex flex-col items-center">
50+
<div
51+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
52+
>
53+
<img alt="Alex Johnson" class="h-full w-full object-cover" />
54+
</div>
55+
<span class="text-center text-xs font-medium md:text-sm"
56+
>Alex Johnson</span
57+
>
58+
</div>
59+
<div class="flex flex-col items-center">
60+
<div
61+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
62+
>
63+
<img alt="山田太郎" class="h-full w-full object-cover" />
64+
</div>
65+
<span class="text-center text-xs font-medium md:text-sm">山田太郎</span>
66+
</div>
67+
<div class="flex flex-col items-center">
68+
<div
69+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
70+
>
71+
<img alt="Emily Brown" class="h-full w-full object-cover" />
72+
</div>
73+
<span class="text-center text-xs font-medium md:text-sm"
74+
>Emily Brown</span
75+
>
76+
</div>
77+
<div class="flex flex-col items-center">
78+
<div
79+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
80+
>
81+
<img alt="伊藤直子" class="h-full w-full object-cover" />
82+
</div>
83+
<span class="text-center text-xs font-medium md:text-sm">伊藤直子</span>
84+
</div>
85+
<div class="flex flex-col items-center">
86+
<div
87+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
88+
>
89+
<img alt="Michael Wilson" class="h-full w-full object-cover" />
90+
</div>
91+
<span class="text-center text-xs font-medium md:text-sm"
92+
>Michael Wilson</span
93+
>
94+
</div>
95+
<div class="flex flex-col items-center">
96+
<div
97+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
98+
>
99+
<img alt="高橋誠" class="h-full w-full object-cover" />
100+
</div>
101+
<span class="text-center text-xs font-medium md:text-sm">高橋誠</span>
102+
</div>
103+
<div class="flex flex-col items-center">
104+
<div
105+
class="mb-1 h-12 w-12 overflow-hidden rounded-full bg-white shadow-sm md:h-16 md:w-16"
106+
>
107+
<img alt="Sarah Davis" class="h-full w-full object-cover" />
108+
</div>
109+
<span class="text-center text-xs font-medium md:text-sm"
110+
>Sarah Davis</span
111+
>
112+
</div>
113+
</div>
114+
</div>
115+
</div>

0 commit comments

Comments
 (0)