forked from thedevdojo/tails-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpricing-clean.html
72 lines (72 loc) · 6.84 KB
/
pricing-clean.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div class="text-center transform scale-75">
<div class="xl:p-18 xl:m-auto">
<div class="grid xl:grid-cols-3">
<div class="border-2 mt-20 pb-20 bg-white xl:p-20 rounded-lg xl:ml-1 shadow-xl z-10 hover:shadow-2xl">
<div class="mt-12 xl:mt-0 w-2/6 p-4 m-auto border-4 border-purple-400 rounded-full">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 213.485 213.485" style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
<path d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z"/>
</svg>
</div>
<h3 class="font-bold mt-8 text-4xl">Free</h3>
<h3 class="font-semibold text-4xl text-purple-400 mt-6 mb-6">$0 / Month</h3>
<p class="text-2xl font-semibold m-auto mt-6 mb-6 pr-5 xl:pl-5 w-11/12">
<div class="mt-6 text-xl"> · Feature 1 · </div>
<div class="mt-6 text-xl"> · Free feature 2 · </div>
<div class="mt-6 text-xl"> · Free feature 3 · </div>
<div class="mt-6 text-xl"> · Ultimately free feature · </div>
<button class="mt-12 xl:mb-6 bg-purple-400 rounded w-5/6 h-16 text-xl font-semibold text-white">Select</button>
</div>
<div class="transform scale-110 border-2 mt-20 pb-20 bg-white xl:p-20 rounded-lg xl:ml-1 shadow-xl z-10 hover:shadow-2xl">
<div class="mt-12 xl:mt-0 w-2/6 p-4 m-auto border-4 border-purple-400 rounded-full">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 213.485 213.485" style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
<path d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z"/>
</svg>
</div>
<h3 class="font-bold text-3xl mt-8">Medium</h3>
<h3 class="font-semibold text-4xl text-purple-400 mt-6 mb-6">$25 / Month</h3>
<p class="text-2xl font-semibold m-auto mt-6 mb-6 pr-5 xl:pl-5 w-11/12">
<div class="mt-6 text-xl"> · Feature 1 · </div>
<div class="mt-6 text-xl"> · Paid feature 2 · </div>
<div class="mt-6 text-xl"> · Paid cool feature 3 · </div>
<div class="mt-6 text-xl"> · Ultimately free feature · </div>
<button class="mt-12 xl:mb-6 bg-purple-400 rounded w-5/6 h-16 text-xl font-semibold text-white">Select</button>
</div>
<div class="border-2 bg-white pb-20 mt-20 xl:p-20 rounded-lg xl:ml-1 shadow-xl hover:shadow-2xl">
<div class="mt-12 xl:mt-0 w-2/6 p-4 m-auto border-4 border-purple-400 rounded-full">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 213.485 213.485" style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
<path d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z"/>
</svg>
</div>
<h3 class="font-bold text-3xl mt-8">Large</h3>
<h3 class="font-semibold text-4xl text-purple-400 mt-6 mb-6">$50 / Month</h3>
<p class="text-2xl font-semibold m-auto mt-6 mb-6 pr-5 xl:pl-5 w-11/12">
<div class="mt-6 text-xl"> · Feature 1 · </div>
<div class="mt-6 text-xl"> · Ultimate feature 2 · </div>
<div class="mt-6 text-xl"> · Super feature 3 · </div>
<div class="mt-6 text-xl"> · The most cool feature · </div>
<button class="mt-12 xl:mb-6 bg-purple-400 rounded w-5/6 h-16 text-xl font-semibold text-white">Select</button>
</div>
</div>
</div>
</div>