Skip to content

Commit a8ea8c3

Browse files
davidtheweb-devdavidtheweb-dev
committed
Added pricing cards layout
1 parent 6c70a73 commit a8ea8c3

File tree

1 file changed

+256
-0
lines changed

1 file changed

+256
-0
lines changed

‎pricing-cards/index.html‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script src="https://cdn.tailwindcss.com"></script>
7+
<title>Pricing Cards</title>
8+
</head>
9+
<body>
10+
<!-- Global Container -->
11+
<div class="flex items-center justify-center min-h-screen bg-slate-800">
12+
<!-- Inner Container -->
13+
<div class="flex flex-col my-6 space-y-6 md:space-y-0 md:space-x-6 md:flex-row md:my-0">
14+
<!-- Col 1 -->
15+
<div class="bg-slate-700 rounded-xl text-white">
16+
<!-- Upper Container -->
17+
<div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
18+
<div class="text-center uppercase">Basic</div>
19+
<h2 class="mt-10 font-serif text-5xl text-center">100GB</h2>
20+
<h3 class="mt-2 text-center">1.99€/Month</h3>
21+
<div class="flex justify-center">
22+
<a
23+
href="#"
24+
class="inline-block px-10 py-3 my-6 text-center border border-violet-600 rounded-lg duration-200 hover:bg-violet-800 hover:border-violet-800"
25+
>Purchase</a
26+
>
27+
</div>
28+
</div>
29+
30+
<!-- Border -->
31+
<div class="border-t border-slate-700"></div>
32+
33+
<!-- Lower Container -->
34+
<div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
35+
<!-- List Container -->
36+
<div class="flex flex-col space-y-2">
37+
<!-- List Item 1 -->
38+
<div class="flex justify-center">
39+
<svg
40+
xmlns="http://www.w3.org/2000/svg"
41+
class="w-5 h-5"
42+
viewBox="0 0 24 24"
43+
stroke-width="2"
44+
stroke="currentColor"
45+
fill="none"
46+
stroke-linecap="round"
47+
stroke-linejoin="round"
48+
>
49+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
50+
<path d="M5 12l5 5l10 -10" />
51+
</svg>
52+
<span class="text-sm ml-1">100 GB of storage</span>
53+
</div>
54+
55+
<!-- List Item 2 -->
56+
<div class="flex justify-center">
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
class="w-5 h-5"
60+
viewBox="0 0 24 24"
61+
stroke-width="2"
62+
stroke="currentColor"
63+
fill="none"
64+
stroke-linecap="round"
65+
stroke-linejoin="round"
66+
>
67+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
68+
<path d="M5 12l5 5l10 -10" />
69+
</svg>
70+
<span class="text-sm ml-1">Option to add members</span>
71+
</div>
72+
73+
<!-- List Item 3 -->
74+
<div class="flex justify-center">
75+
<svg
76+
xmlns="http://www.w3.org/2000/svg"
77+
class="w-5 h-5"
78+
viewBox="0 0 24 24"
79+
stroke-width="2"
80+
stroke="currentColor"
81+
fill="none"
82+
stroke-linecap="round"
83+
stroke-linejoin="round"
84+
>
85+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
86+
<path d="M5 12l5 5l10 -10" />
87+
</svg>
88+
<span class="text-sm ml-1">Extra member benefits</span>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
94+
<!-- Col 2 -->
95+
<div class="bg-violet-600 rounded-xl text-white">
96+
<!-- Upper Container -->
97+
<div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
98+
<div class="text-center uppercase">Standard</div>
99+
<h2 class="mt-10 font-serif text-5xl text-center">200GB</h2>
100+
<h3 class="mt-2 text-center">3.99€/Month</h3>
101+
<div class="flex justify-center">
102+
<a
103+
href="#"
104+
class="inline-block px-10 py-3 my-6 text-center border border-violet-600 rounded-lg duration-200 bg-violet-600 hover:bg-violet-800 hover:border-violet-800"
105+
>Purchase</a
106+
>
107+
</div>
108+
</div>
109+
110+
<!-- Border -->
111+
<div class="border-t border-violet-600"></div>
112+
113+
<!-- Lower Container -->
114+
<div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
115+
<!-- List Container -->
116+
<div class="flex flex-col space-y-2">
117+
<!-- List Item 1 -->
118+
<div class="flex justify-center">
119+
<svg
120+
xmlns="http://www.w3.org/2000/svg"
121+
class="w-5 h-5"
122+
viewBox="0 0 24 24"
123+
stroke-width="2"
124+
stroke="currentColor"
125+
fill="none"
126+
stroke-linecap="round"
127+
stroke-linejoin="round"
128+
>
129+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
130+
<path d="M5 12l5 5l10 -10" />
131+
</svg>
132+
<span class="text-sm ml-1">200 GB of storage</span>
133+
</div>
134+
135+
<!-- List Item 2 -->
136+
<div class="flex justify-center">
137+
<svg
138+
xmlns="http://www.w3.org/2000/svg"
139+
class="w-5 h-5"
140+
viewBox="0 0 24 24"
141+
stroke-width="2"
142+
stroke="currentColor"
143+
fill="none"
144+
stroke-linecap="round"
145+
stroke-linejoin="round"
146+
>
147+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
148+
<path d="M5 12l5 5l10 -10" />
149+
</svg>
150+
<span class="text-sm ml-1">Option to add members</span>
151+
</div>
152+
153+
<!-- List Item 3 -->
154+
<div class="flex justify-center">
155+
<svg
156+
xmlns="http://www.w3.org/2000/svg"
157+
class="w-5 h-5"
158+
viewBox="0 0 24 24"
159+
stroke-width="2"
160+
stroke="currentColor"
161+
fill="none"
162+
stroke-linecap="round"
163+
stroke-linejoin="round"
164+
>
165+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
166+
<path d="M5 12l5 5l10 -10" />
167+
</svg>
168+
<span class="text-sm ml-1">Extra member benefits</span>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
174+
<!-- Col 3 -->
175+
<div class="bg-slate-700 rounded-xl text-white">
176+
<!-- Upper Container -->
177+
<div class="p-8 mx-3 mt-3 rounded-t-xl bg-slate-800">
178+
<div class="text-center uppercase">Premium</div>
179+
<h2 class="mt-10 font-serif text-5xl text-center">2 TB</h2>
180+
<h3 class="mt-2 text-center">8.99€/Month</h3>
181+
<div class="flex justify-center">
182+
<a
183+
href="#"
184+
class="inline-block px-10 py-3 my-6 text-center border border-violet-600 rounded-lg duration-200 hover:bg-violet-800 hover:border-violet-800"
185+
>Purchase</a
186+
>
187+
</div>
188+
</div>
189+
190+
<!-- Border -->
191+
<div class="border-t border-slate-700"></div>
192+
193+
<!-- Lower Container -->
194+
<div class="p-8 mx-3 mb-3 rounded-b-xl bg-slate-800">
195+
<!-- List Container -->
196+
<div class="flex flex-col space-y-2">
197+
<!-- List Item 1 -->
198+
<div class="flex justify-center">
199+
<svg
200+
xmlns="http://www.w3.org/2000/svg"
201+
class="w-5 h-5"
202+
viewBox="0 0 24 24"
203+
stroke-width="2"
204+
stroke="currentColor"
205+
fill="none"
206+
stroke-linecap="round"
207+
stroke-linejoin="round"
208+
>
209+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
210+
<path d="M5 12l5 5l10 -10" />
211+
</svg>
212+
<span class="text-sm ml-1">2 TB of storage</span>
213+
</div>
214+
215+
<!-- List Item 2 -->
216+
<div class="flex justify-center">
217+
<svg
218+
xmlns="http://www.w3.org/2000/svg"
219+
class="w-5 h-5"
220+
viewBox="0 0 24 24"
221+
stroke-width="2"
222+
stroke="currentColor"
223+
fill="none"
224+
stroke-linecap="round"
225+
stroke-linejoin="round"
226+
>
227+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
228+
<path d="M5 12l5 5l10 -10" />
229+
</svg>
230+
<span class="text-sm ml-1">Option to add members</span>
231+
</div>
232+
233+
<!-- List Item 3 -->
234+
<div class="flex justify-center">
235+
<svg
236+
xmlns="http://www.w3.org/2000/svg"
237+
class="w-5 h-5"
238+
viewBox="0 0 24 24"
239+
stroke-width="2"
240+
stroke="currentColor"
241+
fill="none"
242+
stroke-linecap="round"
243+
stroke-linejoin="round"
244+
>
245+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
246+
<path d="M5 12l5 5l10 -10" />
247+
</svg>
248+
<span class="text-sm ml-1">Extra member benefits</span>
249+
</div>
250+
</div>
251+
</div>
252+
</div>
253+
</div>
254+
</div>
255+
</body>
256+
</html>

0 commit comments

Comments
 (0)