Skip to content

Commit fc204a3

Browse files
jsvigneshkannajsvigneshkanna
committed
pricing card plagarism removed
1 parent 02f2511 commit fc204a3

File tree

4 files changed

+165
-104
lines changed

4 files changed

+165
-104
lines changed

‎tailwind_components/pricing_cards/pricing_card_ribbon.jsx‎

Lines changed: 75 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,119 @@
11
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const pricingCardRibbon = stripIndent`
4-
<div class="flex min-h-screen items-center justify-center overflow-hidden py-6 sm:py-12">
4+
<div
5+
class="flex min-h-screen items-center justify-center overflow-hidden bg-sky-300 py-6 sm:py-12"
6+
>
57
<!-- Parent -->
68
<div class="relative">
79
<!-- Ribbon -->
8-
<div class="z-2 absolute right-7 -top-7 flex h-20 w-20 items-center justify-center rounded-full bg-[#E77C40] text-xl font-bold text-white">
10+
<div
11+
class="z-2 absolute right-7 -top-7 flex h-20 w-20 items-center justify-center rounded-full bg-[#E77C40] text-xl font-bold text-white"
12+
>
913
<p>New</p>
1014
</div>
1115
<!-- Card -->
12-
<div class="z-1 flex h-[33em] w-[17em] flex-col items-center justify-center gap-5 rounded-xl border-2 px-5 text-center shadow-lg">
16+
<div
17+
class="z-1 flex h-[33em] w-[17em] flex-col items-center justify-center gap-5 rounded-xl border-2 bg-teal-100 px-5 text-center shadow-lg"
18+
>
1319
<p class="text-3xl font-bold">Free</p>
14-
<p class="text-md font-bold opacity-60">Organize across all apps by hand</p>
20+
<p class="text-md font-bold opacity-60">
21+
VK Tailwind Bootsrap Organize across all apps by hand
22+
</p>
1523
<div>
16-
<p class="text-3xl font-bold text-[#1855CB]">$19</p>
24+
<p class="text-3xl font-bold text-[#1855CB]">$2</p>
1725
<p class="font-bold text-[#1855CB] opacity-50">Per Month</p>
1826
</div>
19-
<button class="w-full rounded-md bg-[#1855CB] py-3 text-white hover:bg-[#306fee]">Try for free</button>
27+
<button
28+
class="w-full rounded-md bg-[#1855CB] py-3 text-white hover:bg-[#306fee]"
29+
>
30+
Try for free
31+
</button>
2032
<div class="flex flex-col items-start gap-2">
2133
<!-- TICK 1 -->
2234
<div class="flex items-center gap-3">
23-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3DBB77" class="h-7 w-7">
24-
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
35+
<svg
36+
xmlns="http://www.w3.org/2000/svg"
37+
viewBox="0 0 24 24"
38+
fill="#3DBB77"
39+
class="h-7 w-7"
40+
>
41+
<path
42+
fill-rule="evenodd"
43+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
44+
clip-rule="evenodd"
45+
/>
2546
</svg>
2647
<p class="text-start text-xs">Unlimited product updates</p>
2748
</div>
2849
<!-- TICK 2 -->
2950
<div class="flex items-center gap-3">
30-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3DBB77" class="h-7 w-7">
31-
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
51+
<svg
52+
xmlns="http://www.w3.org/2000/svg"
53+
viewBox="0 0 24 24"
54+
fill="#3DBB77"
55+
class="h-7 w-7"
56+
>
57+
<path
58+
fill-rule="evenodd"
59+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
60+
clip-rule="evenodd"
61+
/>
3262
</svg>
3363
<p class="text-start text-xs">Unlimited product updates</p>
3464
</div>
3565
<!-- TICK 3 -->
3666
<div class="flex items-center gap-3">
37-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3DBB77" class="h-7 w-7">
38-
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
67+
<svg
68+
xmlns="http://www.w3.org/2000/svg"
69+
viewBox="0 0 24 24"
70+
fill="#3DBB77"
71+
class="h-7 w-7"
72+
>
73+
<path
74+
fill-rule="evenodd"
75+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
76+
clip-rule="evenodd"
77+
/>
3978
</svg>
4079
<p class="text-start text-xs">Unlimited product updates</p>
4180
</div>
4281
<!-- TICK 4 -->
4382
<div class="flex items-center gap-3">
44-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#BDBDBD" class="h-7 w-7">
45-
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
83+
<svg
84+
xmlns="http://www.w3.org/2000/svg"
85+
viewBox="0 0 24 24"
86+
fill="#BDBDBD"
87+
class="h-7 w-7"
88+
>
89+
<path
90+
fill-rule="evenodd"
91+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
92+
clip-rule="evenodd"
93+
/>
4694
</svg>
4795
<p class="text-start text-xs">1GB Cloud Storage</p>
4896
</div>
4997
<!-- TICK 5 -->
5098
<div class="flex items-center gap-3">
51-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#BDBDBD" class="h-7 w-7">
52-
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
99+
<svg
100+
xmlns="http://www.w3.org/2000/svg"
101+
viewBox="0 0 24 24"
102+
fill="#BDBDBD"
103+
class="h-7 w-7"
104+
>
105+
<path
106+
fill-rule="evenodd"
107+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
108+
clip-rule="evenodd"
109+
/>
53110
</svg>
54111
<p class="flex-wrap text-start text-xs">Email & Community support</p>
55112
</div>
56113
</div>
57114
</div>
58115
</div>
59116
</div>
60-
`;
117+
`;
61118

62-
export default pricingCardRibbon;
119+
export default pricingCardRibbon;

‎tailwind_components/pricing_cards/small_pricing_card.jsx‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const smallPricingCard = stripIndent`
4-
<div class="flex min-h-screen items-center justify-center overflow-hidden py-6 sm:py-12">
5-
<!-- Card -->
6-
<div class="h-[23em] w-[17em] flex flex-col gap-5 justify-center items-center text-center rounded-xl px-10 border-2 border-[#1855CB] shadow-lg">
7-
<p class="font-bold text-md opacity-60">Organize across all apps by hand</p>
8-
<p class="font-bold text-3xl">Free</p>
9-
<p class="text-md opacity-60">State helps you see how many more days you need to work to reach your financial goal for the month & year.</p>
10-
<div class="flex gap-3 items-center">
11-
<p class="font-bold opacity-50">From</p>
12-
<p class="text-3xl font-bold text-[#1855CB]">$1</p>
4+
<div class="flex h-screen w-full items-center justify-center bg-sky-300">
5+
<div
6+
class="flex min-h-screen items-center justify-center overflow-hidden py-6 sm:py-12"
7+
>
8+
<div
9+
class="flex h-[23em] w-[17em] flex-col items-center justify-center gap-5 rounded-xl border-2 border-[#1855CB] bg-teal-200 px-10 text-center shadow-md shadow-white"
10+
>
11+
<p class="text-md font-bold opacity-60">
12+
VK Tailwind Bootsrap Organize across all apps by hand
13+
</p>
14+
<p class="text-3xl font-bold">Free</p>
15+
<p class="text-md opacity-60">
16+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
17+
consectetur in, soluta illum,...
18+
</p>
19+
<div class="flex items-center gap-3">
20+
<p class="font-bold opacity-50">From</p>
21+
<p class="text-3xl font-bold text-[#1855CB]">$1</p>
22+
</div>
1323
</div>
1424
</div>
1525
</div>
16-
`;
26+
`;
1727

18-
export default smallPricingCard;
28+
export default smallPricingCard;

‎tailwind_components/pricing_cards/standard_pricing.jsx‎

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,27 @@
11
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const samplePricingCard = stripIndent`
4-
<head>
5-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
6-
</head>
7-
8-
9-
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
10-
<div class="p-3 bg-green-500 w-fit">
11-
<div class="border rounded-2xl w-max border-cyan-500 p-9 pr-11 flex bg-white">
12-
<div class=" p-1">
13-
<p class="text-2xl text-blue-700 font-semibold mb-3">STANDARD</p>
14-
<p class="w-52 text-green-300 font-medium">
15-
Most calenders are designed for teams. State is designed for
16-
freelancers who want a simple way
17-
</p>
18-
</div>
19-
<div class="p-1 ml-5 w-40 relative">
20-
<div class="flex">
21-
<div class="basis-1/4 text-blue-700 text-5xl font-semibold">
22-
0
23-
</div>
24-
<div class="basis-3/4">
25-
<p class="text-2xl font-bold text-blue-700">$</p>
26-
<p class="font-medium text-base text-sky-300">Per Month</p>
27-
</div>
4+
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8 bg-sky-300 h-screen">
5+
<div class= p-3">
6+
<div class="flex w-max rounded-2xl border border-red-900 bg-white p-9 pr-11 shadow-md shadow-rose-300">
7+
<div class="p-1">
8+
<p class="mb-3 text-2xl font-semibold text-blue-700">STANDARD</p>
9+
<p class="w-52 font-medium text-green-700">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam quae repellendus ...</p>
10+
</div>
11+
<div class="relative ml-5 w-40 p-1">
12+
<div class="flex">
13+
<div class="basis-1/4 text-5xl font-semibold text-blue-700">4</div>
14+
<div class="basis-3/4">
15+
<p class="text-2xl font-bold text-blue-700">$</p>
16+
<p class="text-base font-medium text-sky-300">Per Month</p>
2817
</div>
29-
30-
<button class="w-full bg-blue-700 text-white rounded p-4 mt-auto absolute bottom-0">
31-
Try for free
32-
</button>
3318
</div>
19+
20+
<button class="absolute bottom-0 mt-auto w-full rounded bg-blue-700 p-4 text-white">Try for free</button>
3421
</div>
35-
22+
</div>
23+
</div>
3624
</div>
37-
</div>
38-
`;
25+
`;
3926

4027
export default samplePricingCard;

‎tailwind_components/pricing_cards/vertical_pricing.jsx‎

Lines changed: 51 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,63 @@
11
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const verticalPricing = stripIndent`
4-
<div class="flex h-full w-full items-center justify-center bg-slate-800">
5-
<div class="my-10 w-64 max-w-sm rounded-xl border border-gray-200 bg-white shadow-md">
6-
<a href="#"> </a>
7-
<div class="flex flex-col items-center justify-center p-6 text-center">
8-
<a href="#"> </a>
9-
<div class="mt-4 mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-700">
4+
<div class="flex h-screen w-full items-center justify-center bg-sky-300">
5+
<div
6+
class="my-5 w-64 max-w-sm rounded-xl border border-gray-200 bg-white shadow-md"
7+
>
8+
<div class="flex flex-col items-center justify-center p-6 text-center">
9+
<div
10+
class="mt-4 mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-700"
11+
>
12+
<svg
13+
xmlns="http://www.w3.org/2000/svg"
14+
fill="none"
15+
viewBox="0 0 24 24"
16+
stroke-width="1.5"
17+
stroke="currentColor"
18+
class="h-8 w-8 text-white"
19+
>
20+
<path
21+
stroke-linecap="round"
22+
stroke-linejoin="round"
23+
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
24+
/>
25+
</svg>
26+
</div>
27+
<h5 class="mb-5 px-4 font-bold tracking-tight text-gray-700">Standard</h5>
28+
<p class="mb-4 px-8 text-sm font-bold text-gray-500">
29+
VK Tailwind Bootsrap
30+
</p>
31+
32+
<div class="mb-3 flex flex-row">
33+
<h3 class="mx-2 text-4xl font-bold text-blue-700">6</h3>
34+
<div class="flex flex-col">
1035
<svg
1136
xmlns="http://www.w3.org/2000/svg"
12-
fill="none"
13-
viewBox="0 0 24 24"
14-
stroke-width="1.5"
15-
stroke="currentColor"
16-
class="h-8 w-8 text-white">
37+
width="16"
38+
height="16"
39+
fill="currentColor"
40+
class="bi bi-currency-dollar font-bold text-blue-700"
41+
viewBox="0 0 16 16"
42+
>
1743
<path
18-
stroke-linecap="round"
19-
stroke-linejoin="round"
20-
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
44+
d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z"
2145
/>
2246
</svg>
47+
<p class="text-xs text-blue-500">Per Month</p>
2348
</div>
24-
<h5 class="mb-5 px-4 font-bold tracking-tight text-gray-700">
25-
Standard
26-
</h5>
27-
<p class="mb-4 px-8 text-sm font-bold text-gray-500">
28-
Organize across all apps by hand
29-
</p>
30-
31-
<div class="mb-3 flex flex-row">
32-
<h3 class="mx-2 text-4xl font-bold text-blue-700">0</h3>
33-
<div class="flex flex-col">
34-
<svg
35-
xmlns="http://www.w3.org/2000/svg"
36-
width="16"
37-
height="16"
38-
fill="currentColor"
39-
class="bi bi-currency-dollar font-bold text-blue-700"
40-
viewBox="0 0 16 16">
41-
<path d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z" />
42-
</svg>
43-
<p class="text-xs text-blue-500">Per Month</p>
44-
</div>
45-
</div>
46-
<p class="mb-3 text-sm font-normal text-gray-700">
47-
Slate helps you see how many more days you need to work to reach you
48-
financial goal for the month and year.
49-
</p>
50-
<button class="my-4 rounded bg-blue-600 py-3 px-4 text-sm font-bold text-white hover:bg-blue-700">
51-
Try for free
52-
</button>
5349
</div>
50+
<p class="mb-3 text-sm font-medium text-gray-700">
51+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
52+
consectetur in, soluta illum,...
53+
</p>
54+
<button
55+
class="my-4 rounded bg-blue-600 py-3 px-4 text-sm font-bold text-white hover:bg-blue-700"
56+
>
57+
Try for free
58+
</button>
5459
</div>
55-
</div>`;
60+
</div>
61+
</div>
62+
`;
5663
export default verticalPricing;

0 commit comments

Comments
 (0)