Skip to content

Commit f5ea0e8

Browse files
jsvigneshkannajsvigneshkanna
committed
feature cards plagarism removed
1 parent 38317fd commit f5ea0e8

File tree

6 files changed

+266
-96
lines changed

6 files changed

+266
-96
lines changed

‎tailwind_components/feature_cards/basic_card.jsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { stripIndent } from "react-codepen-prefill-embed";
1+
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const basicCard = stripIndent`
4-
<div class="flex h-screen w-screen items-center justify-center">
4+
<div class="h-screen bg-sky-300 px-10 pt-20">
55
<div class="max-w-sm rounded-lg border px-8 py-8 border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800">
66
<span class="flex gap-4 items-center py-4">
7-
<svg class='text-blue-500 h-14' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
8-
<path stroke-linecap="round" stroke-linejoin="round" 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" />
9-
</svg>
10-
<p class='font-bold text-md text-black'>The quick jumps over the lazy dog</p>
11-
</span>
12-
<p class='font-bold text-lg text-slate-500'>The quick fox jumps over the lazy dog the quick fox jumps over the lazy dog</p>
7+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 text-white">
8+
<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
9+
</svg>
10+
11+
<p class='font-bold text-md text-black'>People come here for cool tailwind CSS UI components</p>
12+
</span>
13+
<p class='font-bold text-lg text-slate-500'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore at ex aliquid ipsa praesentium magnam quia molestiae sint, eveniet soluta autem ipsam fuga maiores nostrum velit unde natus placeat ea.</p>
1314
</div>
1415
</div>
1516
</div>

‎tailwind_components/feature_cards/brand_card.jsx‎

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,60 @@
1-
import { stripIndent } from "react-codepen-prefill-embed";
1+
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const brandCard = stripIndent`
4-
<div class="flex h-screen w-screen items-center justify-center">
5-
<div class="max-w-sm rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800">
6-
<a href="#">
7-
<img class="rounded-t-lg" src="https://www.apple.com/v/iphone/home/bk/images/meta/iphone__ky2k6x5u6vue_og.png" alt="" />
8-
</a>
9-
<div class="p-5 text-center">
10-
<a href="#">
11-
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">At your fingertips</h5>
12-
</a>
13-
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Slate helps you see how many more days you need to work to rich.</p>
14-
<a href="#" class="inline-flex items-center rounded-lg bg-blue-700 py-2 px-3 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
15-
Read more
16-
<svg aria-hidden="true" class="ml-2 -mr-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
4+
<div class="h-screen bg-sky-300 pt-20">
5+
<div class="w-screen px-6">
6+
<div
7+
class="max-w-sm rounded-lg border border-red-200 bg-blue-600 shadow-lg shadow-rose-300"
8+
>
9+
<a
10+
href="https://tailwindcsscomponents.vercel.app/"
11+
target="_blank"
12+
rel="noreferrer"
13+
>
14+
<img
15+
class="rounded-t-lg"
16+
src="https://www.apple.com/v/iphone/home/bk/images/meta/iphone__ky2k6x5u6vue_og.png"
17+
alt=""
18+
/>
1719
</a>
20+
<div class="p-5 text-center">
21+
<a
22+
href="https://tailwindcsscomponents.vercel.app/"
23+
target="_blank"
24+
rel="noreferrer"
25+
>
26+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white">
27+
At your fingertips
28+
</h5>
29+
</a>
30+
<p class="mb-3 font-normal text-gray-200">
31+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos
32+
voluptate magni error fugiat beatae veritatis inventore natus, minima
33+
velit illum numquam, voluptatum, voluptas obcaecati similique libero.
34+
Aperiam natus delectus porro?
35+
</p>
36+
<a
37+
href="https://tailwindcsscomponents.vercel.app/"
38+
target="_blank"
39+
rel="noreferrer"
40+
class="inline-flex items-center rounded-lg bg-blue-700 py-2 px-3 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
41+
>
42+
Read more
43+
<svg
44+
aria-hidden="true"
45+
class="ml-2 -mr-1 h-4 w-4"
46+
fill="currentColor"
47+
viewBox="0 0 20 20"
48+
xmlns="http://www.w3.org/2000/svg"
49+
>
50+
<path
51+
fill-rule="evenodd"
52+
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
53+
clip-rule="evenodd"
54+
></path>
55+
</svg>
56+
</a>
57+
</div>
1858
</div>
1959
</div>
2060
</div>

‎tailwind_components/feature_cards/card_with_button_button1.jsx‎

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

33
const cardWithButton = stripIndent`
4-
<div class="py-8 px-8 max-w-sm mx-auto mt-12 bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
5-
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="https://thispersondoesnotexist.com/image" alt="Woman's Face">
6-
<div class="text-center space-y-2 sm:text-left">
7-
<div class="space-y-0.5">
8-
<p class="text-lg text-black font-semibold">
9-
Erin Lindford
10-
</p>
11-
<p class="text-slate-500 font-medium">
12-
Product Engineer
13-
</p>
14-
</div>
15-
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
16-
</div>
4+
<div class="h-screen bg-sky-300 pt-20">
5+
<div
6+
class="mx-auto max-w-sm space-y-2 rounded-xl bg-white py-8 px-8 shadow-lg shadow-red-300 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 sm:py-4"
7+
>
8+
<img
9+
class="mx-auto block h-24 rounded-full sm:mx-0 sm:shrink-0"
10+
src="https://thispersondoesnotexist.com/image"
11+
alt="Woman's Face"
12+
/>
13+
<div class="space-y-2 text-center sm:text-left">
14+
<div class="space-y-0.5">
15+
<p class="text-lg font-semibold text-black">J S Vignesh Kanna</p>
16+
<p class="font-medium text-slate-500">Software Engineer</p>
17+
</div>
18+
<button
19+
class="rounded-full border border-purple-200 px-4 py-1 text-sm font-semibold text-purple-600 hover:border-transparent hover:bg-purple-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
20+
>
21+
Message
22+
</button>
1723
</div>
24+
</div>
25+
</div>
1826
`;
1927

2028
export default cardWithButton;

‎tailwind_components/feature_cards/learn_more_card.jsx‎

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

3-
4-
const learnmoreCard= stripIndent`
3+
const learnmoreCard = stripIndent`
54
<div class="m-5">
6-
<div class="ml-1.5 flex items-center rounded-t-lg" style="width: 317px; height: 132px; background-color: #8ec2f2">
5+
<div
6+
class="ml-1.5 flex items-center rounded-t-lg"
7+
style="width: 317px; height: 132px; background-color: #8ec2f2"
8+
>
79
<div
810
class="rounded-full bg-white"
9-
style="
10-
width: 72px;
11-
height: 72px;
12-
margin: right 15px;
13-
margin-left: 50px;
14-
"
11+
style="width: 72px; height: 72px; margin: right 15px; margin-left: 50px"
1512
></div>
16-
<svg width="35" height="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#1855CB" class="rounded-full bg-white" style="position: absolute; left: 95">
17-
<path stroke-linecap="round" stroke-linejoin="round" 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" />
13+
<svg
14+
width="35"
15+
height="40"
16+
xmlns="http://www.w3.org/2000/svg"
17+
fill="none"
18+
viewBox="0 0 24 24"
19+
stroke-width="1.5"
20+
stroke="#1855CB"
21+
class="rounded-full bg-white"
22+
style="position: absolute; left: 95"
23+
>
24+
<path
25+
stroke-linecap="round"
26+
stroke-linejoin="round"
27+
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"
28+
/>
1829
</svg>
1930
<div class="ml-4 w-32 font-semibold text-white" style="right: 50px">
2031
<p>The quick</p>
@@ -25,20 +36,54 @@ const learnmoreCard= stripIndent`
2536
<div
2637
class="border"
2738
style="
28-
border-color: #a9d6ff;
29-
width: 328px;
30-
padding-left: 50px;
31-
height: 253px;
32-
border-radius: 11px;
33-
"
39+
border-color: #a9d6ff;
40+
width: 328px;
41+
padding-left: 50px;
42+
height: 253px;
43+
border-radius: 11px;
44+
"
3445
>
35-
<div class="text-content w-44 text-sm font-semibold" style="padding-top: 30px; color: #737373">- The best products start with Figma</div>
36-
<div class="text-content w-40 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Design with real data</div>
37-
<div class="text-content w-48 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Lightning fast prototyping</div>
38-
<div class="text-content w-40 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Fastest way to organize</div>
39-
<div class="text-content w-44 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Work at the speed of thought.</div>
40-
<div class="font-medium" style="margin-top: 5px">
41-
<a href="#" style="color: #1855cb">Learn More</a>
46+
<div
47+
class="text-content w-44 text-sm font-semibold"
48+
style="padding-top: 30px; color: #737373"
49+
>
50+
- The best products start with Figma
51+
</div>
52+
<div
53+
class="text-content w-40 text-sm font-semibold"
54+
style="margin-top: 5px; color: #737373"
55+
>
56+
- Design with real data
57+
</div>
58+
<div
59+
class="text-content w-48 text-sm font-semibold"
60+
style="margin-top: 5px; color: #737373"
61+
>
62+
- Lightning fast prototyping
63+
</div>
64+
<div
65+
class="text-content w-40 text-sm font-semibold"
66+
style="margin-top: 5px; color: #737373"
67+
>
68+
- Fastest way to organize
69+
</div>
70+
<div
71+
class="text-content w-44 text-sm font-semibold"
72+
style="margin-top: 5px; color: #737373"
73+
>
74+
- Work at the speed of thought.
75+
</div>
76+
<div
77+
class="w-max rounded-lg bg-rose-300 px-4 py-2 font-medium"
78+
style="margin-top: 5px"
79+
>
80+
<a
81+
href="https://tailwindcsscomponents.vercel.app/"
82+
target="_blank"
83+
rel="noreferrer"
84+
style="color: #1855cb"
85+
>Learn More</a
86+
>
4287
</div>
4388
</div>
4489
</div>

‎tailwind_components/feature_cards/presentation_card.jsx‎

Lines changed: 61 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,67 @@
1-
import { stripIndent } from "react-codepen-prefill-embed";
1+
import {stripIndent} from "react-codepen-prefill-embed";
22

33
const presentationCards = stripIndent`
4-
<div class="flex h-screen w-screen items-center justify-center bg-blue-100">
5-
<section class="grid gap-6 p-4 max-w-7x1 text-white grid-cols-1 md:grid-cols-2" style={{ margin: "0 auto" }}>
6-
<div class="h-80 relative flex items-end truncate p-4 w-full text-center bg-cover bg-center shadow-xl"
7-
style="background-image: url('https://images.unsplash.com/photo-1504870712357-65ea720d6078?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')"
8-
>
9-
<div class="relative flex flex-col items-center w-full p-4 z-1 transition-transform duration-700 ease-in ">
10-
<h2 class="text-xl font-bold leading-tight py-2 px-8 bg-black bg-opacity-60 rounded">Mountain View</h2>
11-
<p class="italic leading-snug truncate whitespace-pre-wrap max-w-xs max-h-44 bg-black bg-opacity-30 rounded mt-6">Check out all of these gorgeous mountain trips with beautiful views mountains</p>
12-
<button class="cursor-pointer mt-6 py-3 px-6 font-bold text-xs bg-black border-none uppercase tracking-wide hover:bg-red-600">View trips</button>
13-
</div>
14-
</div>
15-
4+
<div class="flex h-screen w-screen items-center justify-center bg-sky-300">
5+
<section
6+
class="grid gap-6 p-4 max-w-7x1 text-white grid-cols-1 md:grid-cols-2"
7+
style={{ margin: "0 auto" }}
8+
>
9+
<div
10+
class="h-80 relative flex items-end truncate p-4 w-full text-center bg-cover bg-center shadow-xl"
11+
style="
12+
background-image: url('https://th.bing.com/th/id/OIP.7Tue3HtDK6rJB9UIswxz9QHaEo?pid=ImgDet&rs=1');
13+
"
14+
>
15+
<div
16+
class="relative flex flex-col items-center w-full p-4 z-1 transition-transform duration-700 ease-in"
17+
>
18+
<h2
19+
class="text-xl font-bold leading-tight py-2 px-8 bg-black bg-opacity-60 rounded"
20+
>
21+
Mountain View
22+
</h2>
23+
<p
24+
class="italic leading-snug truncate whitespace-pre-wrap max-w-xs max-h-44 bg-black bg-opacity-30 rounded mt-6"
25+
>
26+
Check out all of these gorgeous mountain trips with beautiful views
27+
mountains
28+
</p>
29+
<button
30+
class="cursor-pointer mt-6 py-3 px-6 font-bold text-xs bg-black border-none uppercase tracking-wide hover:bg-red-600"
31+
>
32+
View trips
33+
</button>
34+
</div>
35+
</div>
1636
17-
<div class="h-80 relative flex items-end truncate p-4 w-full text-center bg-cover bg-center shadow-xl"
18-
style="background-image: url('https://images.unsplash.com/photo-1505118380757-91f5f5632de0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=626&q=80')"
19-
>
20-
<div class="relative flex flex-col items-center w-full p-4 z-1 transition-transform duration-700 ease-in ">
21-
<h2 class="text-xl font-bold leading-tight py-2 px-8 bg-black bg-opacity-60 rounded">To the Beach</h2>
22-
<p class="italic leading-snug truncate whitespace-pre-wrap max-w-xs max-h-44 bg-black bg-opacity-30 rounded mt-6">Plan your next beach trip with these fabulous destinations</p>
23-
<button class="cursor-pointer mt-6 py-3 px-6 font-bold text-xs bg-black border-none uppercase tracking-wide hover:bg-red-600">View trips</button>
24-
</div>
25-
</div>
26-
</section>
37+
<div
38+
class="h-80 relative flex items-end truncate p-4 w-full text-center bg-cover bg-center shadow-xl"
39+
style="
40+
background-image: url('https://i.pinimg.com/originals/23/d4/ed/23d4edf6d6852b20538ab336879b8ec3.jpg');
41+
"
42+
>
43+
<div
44+
class="relative flex flex-col items-center w-full p-4 z-1 transition-transform duration-700 ease-in"
45+
>
46+
<h2
47+
class="text-xl font-bold leading-tight py-2 px-8 bg-black bg-opacity-60 rounded"
48+
>
49+
To the Beach
50+
</h2>
51+
<p
52+
class="italic leading-snug truncate whitespace-pre-wrap max-w-xs max-h-44 bg-black bg-opacity-30 rounded mt-6"
53+
>
54+
Plan your next beach trip with these fabulous destinations
55+
</p>
56+
<button
57+
class="cursor-pointer mt-6 py-3 px-6 font-bold text-xs bg-black border-none uppercase tracking-wide hover:bg-red-600"
58+
>
59+
View trips
60+
</button>
61+
</div>
2762
</div>
63+
</section>
64+
</div>
2865
`;
2966

30-
export default presentationCards;
67+
export default presentationCards;

0 commit comments

Comments
 (0)