Skip to content

Commit ffab7e4

Browse files
jsvigneshkannajsvigneshkanna
authored
Merge pull request #238 from MunavvarSinan/pricing_card
Pricing card
2 parents d3464c8 + 2077176 commit ffab7e4

File tree

2 files changed

+154
-1
lines changed

2 files changed

+154
-1
lines changed

‎tailwind_components/pricing_cards/collection.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import standardPricingCard from "./standard_pricing.jsx";
22
import verticalPricing from "./vertical_pricing.jsx";
33
import smallPricingCard from "./small_pricing_card.jsx";
44
import pricingCardRibbon from "./pricing_card_ribbon.jsx";
5-
5+
import pricingCardWithButton from "./pricing_with_button";
66
const pricingCardsCollections = [
77
{componentName: "Standard Pricing Card", component: standardPricingCard},
88
{componentName: "Vertical Pricing Card", component: verticalPricing},
99
{componentName: "Small Pricing Card", component: smallPricingCard},
1010
{componentName: "Pricing Card with Ribbon", component: pricingCardRibbon},
11+
{componentName: "Pricing Card with Button", component: pricingCardWithButton},
1112
];
1213

1314
export default pricingCardsCollections;

‎tailwind_components/pricing_cards/pricing_with_button.jsx‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import {stripIndent} from "react-codepen-prefill-embed";
2+
3+
const pricingCardWithButton = stripIndent`
4+
<div class="bg-white dark:bg-slate-300 ">
5+
<div class="container px-6 py-8 mx-auto h-screen">
6+
<div class="flex flex-col items-center justify-center md:items-end md:flex-row">
7+
<div class="w-full px-6 py-4 transition-colors duration-300 transform rounded-lg md:mx-5 md:w-96 bg-gray-50 dark:bg-white">
8+
<div class="text-center">
9+
<p class="text-4xl font-bold text-gray-800 dark:text-slate-700">
10+
Free
11+
</p>
12+
<p class="mt-4 text-slate-700 dark:text-slate-700 font-semibold">
13+
Organize across all apps by hands
14+
</p>
15+
<div class="flex flex-row gap-1 items justify-center">
16+
<h4 class="mt-2 text-5xl font-semibold text-blue-500 dark:text-blue-500">
17+
0
18+
</h4>
19+
<span class="text-blue-500 text-4xl"> $ </span>
20+
<p class="mt-8 text-slate-700 font-semibold dark:text-blue-300">
21+
per month
22+
</p>
23+
</div>
24+
</div>
25+
26+
<ul role="list" class="my-10 space-y-5">
27+
<li class="flex space-x-3">
28+
<svg
29+
aria-hidden="true"
30+
class="flex-shrink-0 w-8 h-8 text-green-600 dark:text-green-500"
31+
fill="currentColor"
32+
viewBox="0 0 20 20"
33+
xmlns="http://www.w3.org/2000/svg"
34+
>
35+
<title>Check icon</title>
36+
<path
37+
fill-rule="evenodd"
38+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
39+
clip-rule="evenodd"
40+
></path>
41+
</svg>
42+
<span class="text-xl font-normal leading-tight text-gray-500 dark:text-gray-400">
43+
Unlimited Product Updates
44+
</span>
45+
</li>
46+
<li class="flex space-x-3">
47+
<svg
48+
aria-hidden="true"
49+
class="flex-shrink-0 w-8 h-8 text-green-600 dark:text-green-500"
50+
fill="currentColor"
51+
viewBox="0 0 20 20"
52+
xmlns="http://www.w3.org/2000/svg"
53+
>
54+
<title>Check icon</title>
55+
<path
56+
fill-rule="evenodd"
57+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
58+
clip-rule="evenodd"
59+
></path>
60+
</svg>
61+
<span class="text-xl font-normal leading-tight text-gray-500 dark:text-gray-400">
62+
API Access
63+
</span>
64+
</li>
65+
<li class="flex space-x-3">
66+
<svg
67+
aria-hidden="true"
68+
class="flex-shrink-0 w-8 h-8 text-green-600 dark:text-green-500"
69+
fill="currentColor"
70+
viewBox="0 0 20 20"
71+
xmlns="http://www.w3.org/2000/svg"
72+
>
73+
<title>Check icon</title>
74+
<path
75+
fill-rule="evenodd"
76+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
77+
clip-rule="evenodd"
78+
></path>
79+
</svg>
80+
<span class="text-xl font-normal leading-tight text-gray-500 dark:text-gray-400">
81+
Integration help
82+
</span>
83+
</li>
84+
<li class="flex space-x-3 ">
85+
<svg
86+
aria-hidden="true"
87+
class="flex-shrink-0 w-8 h-8 text-gray-400 dark:text-gray-500"
88+
fill="currentColor"
89+
viewBox="0 0 20 20"
90+
xmlns="http://www.w3.org/2000/svg"
91+
>
92+
<title>Check icon</title>
93+
<path
94+
fill-rule="evenodd"
95+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
96+
clip-rule="evenodd"
97+
></path>
98+
</svg>
99+
<span class="text-xl font-normal leading-tight text-gray-500">
100+
1GB Cloud Storage
101+
</span>
102+
</li>
103+
<li class="flex space-x-3 ">
104+
<svg
105+
aria-hidden="true"
106+
class="flex-shrink-0 w-8 h-8 text-gray-400 dark:text-gray-500"
107+
fill="currentColor"
108+
viewBox="0 0 20 20"
109+
xmlns="http://www.w3.org/2000/svg"
110+
>
111+
<title>Check icon</title>
112+
<path
113+
fill-rule="evenodd"
114+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
115+
clip-rule="evenodd"
116+
></path>
117+
</svg>
118+
<span class="text-xl font-normal leading-tight text-gray-500">
119+
Email and Community Support
120+
</span>
121+
</li>
122+
<li class="flex space-x-3 ">
123+
<svg
124+
aria-hidden="true"
125+
class="flex-shrink-0 w-8 h-8 text-gray-400 dark:text-gray-500"
126+
fill="currentColor"
127+
viewBox="0 0 20 20"
128+
xmlns="http://www.w3.org/2000/svg"
129+
>
130+
<title>Check icon</title>
131+
<path
132+
fill-rule="evenodd"
133+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
134+
clip-rule="evenodd"
135+
></path>
136+
</svg>
137+
<span class="text-xl font-normal leading-tight text-gray-500">
138+
Complete documentation
139+
</span>
140+
</li>
141+
</ul>
142+
143+
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-green-600">
144+
Try for free
145+
</button>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
`;
151+
152+
export default pricingCardWithButton;

0 commit comments

Comments
 (0)