Skip to content

Commit 91f06c0

Browse files
marqbeniaminmarqbeniamin
authored
Merge pull request creativetimofficial#824 from creativetimofficial/@material-tailwind/html-cards-seo
@Material tailwind/html new cards
2 parents 5fca58a + 39becea commit 91f06c0

8 files changed

+412
-1
lines changed

‎docs-content/html/card/card-with-alert.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
export function CardWithAlert() {
2+
return (
3+
<div className="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2">
4+
<div className="relative flex w-full p-3 pr-12 text-sm text-white bg-red-500 rounded-md">
5+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 mr-2">
6+
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
7+
</svg>
8+
Please update your card details.
9+
<button className="flex items-center justify-center transition-all w-8 h-8 rounded-md text-white hover:bg-white/10 active:bg-white/10 absolute top-1.5 right-1.5" type="button">
10+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="h-5 w-5" strokeWidth="2">
11+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
12+
</svg>
13+
</button>
14+
</div>
15+
<div className="p-3">
16+
<div className="flex items-center mb-2">
17+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="h-5 w-5 text-slate-600">
18+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
19+
</svg>
20+
<h5 className="ml-2 text-slate-800 text-xl font-semibold">
21+
Custom CMS for startup
22+
</h5>
23+
</div>
24+
<p className="block text-slate-600 leading-normal font-light mb-4">
25+
Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others.
26+
</p>
27+
<div>
28+
<a href="#" className="text-slate-800 font-semibold text-sm hover:underline flex items-center">
29+
Learn More
30+
<svg xmlns="http://www.w3.org/2000/svg" className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
31+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
32+
</svg>
33+
</a>
34+
</div>
35+
</div>
36+
</div>
37+
38+
);
39+
}

‎docs-content/html/card/card-with-animation.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export function CardWithAnimation() {
2+
return (
3+
<div className="cursor-pointer group relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 hover:shadow-lg transition-shadow duration-300">
4+
<div className="relative h-56 m-2.5 overflow-hidden text-white rounded-md">
5+
<img className="transition-transform duration-500 ease-[cubic-bezier(0.25, 1, 0.5, 1)] transform group-hover:scale-110"
6+
src="https://images.unsplash.com/photo-1496436818536-e239445d3327?q=80&w=1200" alt="investment-seed-round" />
7+
</div>
8+
<div className="p-4">
9+
<h6 className="mb-2 text-slate-800 text-xl font-semibold">
10+
Successful Seed Round
11+
</h6>
12+
<p className="text-slate-600 leading-normal font-light">
13+
We are thrilled to announce the completion of our seed round, securing $2M in investment to fuel product development and market expansion.
14+
</p>
15+
</div>
16+
<div className="px-4 pb-4 pt-0 mt-2">
17+
<button className="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
18+
Read article
19+
</button>
20+
</div>
21+
</div>
22+
23+
);
24+
}

‎docs-content/html/card/card-with-bottom-image.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export function CardWithBottomImage() {
2+
return (
3+
<div className="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
4+
<div className="p-4">
5+
<h6 className="mb-2 text-slate-800 text-xl font-semibold">
6+
Special News Article
7+
</h6>
8+
<p className="text-slate-600 leading-normal font-light">
9+
The place is close to Barceloneta Beach and bus stop just 2 min by walk
10+
and near to &quot;Naviglio&quot; where you can enjoy the main night life in
11+
Barcelona.
12+
</p>
13+
</div>
14+
<div className="relative h-56 m-2.5 overflow-hidden text-white rounded-md">
15+
<img src="https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=1200" alt="card-image" />
16+
</div>
17+
</div>
18+
);
19+
}

‎docs-content/html/card/card-with-centered-content.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export function CardWithCenteredContent() {
2+
return (
3+
<div className="relative min-h-80 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-2">
4+
<div className="p-3 text-center">
5+
<div className="flex justify-center mb-4">
6+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-10 h-10 text-purple-400">
7+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
8+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
9+
</svg>
10+
11+
</div>
12+
<div className="flex justify-center mb-2">
13+
<h5 className="text-slate-800 text-2xl font-semibold">
14+
Lit Ideas for Startups
15+
</h5>
16+
</div>
17+
<p className="block text-slate-600 leading-normal font-light mb-4 max-w-lg">
18+
Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others.
19+
</p>
20+
<div className="text-center">
21+
<button className="min-w-32 rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none" type="button">
22+
View More
23+
</button>
24+
</div>
25+
</div>
26+
</div>
27+
28+
);
29+
}

‎docs-content/html/card/card-with-tabs.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export function CardWithTabs() {
2+
return (
3+
<div className="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2">
4+
<div className="w-full">
5+
<ul className="relative flex flex-wrap px-1.5 py-1.5 list-none rounded-md bg-slate-100" data-tabs="tabs" role="list">
6+
<li className="z-30 flex-auto text-center">
7+
<a className="flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-md cursor-pointer text-slate-600 bg-inherit"
8+
data-tab-target="" role="tab" aria-selected="true" aria-controls="dashboard">
9+
Dashboard
10+
</a>
11+
</li>
12+
<li className="z-30 flex-auto text-center">
13+
<a className="flex items-center justify-center w-full px-0 py-2 mb-0 text-sm transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-600 bg-inherit"
14+
data-tab-target="" role="tab" aria-selected="false" aria-controls="profile">
15+
Profile
16+
</a>
17+
</li>
18+
<li className="z-30 flex-auto text-center">
19+
<a className="flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
20+
data-tab-target="" role="tab" aria-selected="false" aria-controls="settings">
21+
Settings
22+
</a>
23+
</li>
24+
</ul>
25+
26+
<div data-tab-content="" className="p-3">
27+
<div id="dashboard" role="tabpanel">
28+
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
29+
Website Review Check Text
30+
</h5>
31+
<p className="text-slate-600 leading-normal font-light">
32+
Because it&apos;s about motivating the doers. Because I&apos;m
33+
here to follow my dreams and inspire other people to follow their
34+
dreams, too.
35+
</p>
36+
</div>
37+
<div className="hidden opacity-0" id="profile" role="tabpanel">
38+
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
39+
The place is close to Barceloneta
40+
</h5>
41+
<p className="text-slate-600 leading-normal font-light">
42+
The reading of all good books is like a conversation with the
43+
finest minds of past centuries. Follow my dreams and inspire other people.
44+
</p>
45+
</div>
46+
<div className="hidden opacity-0" id="settings" role="tabpanel">
47+
<h5 className="mb-2 text-slate-800 text-xl font-semibold">
48+
Close to Barceloneta
49+
</h5>
50+
<p className="text-slate-600 leading-normal font-light">
51+
Comparing yourself to others is the thief of joy.
52+
The reading of all good books is like a conversation
53+
</p>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
);
59+
}

‎docs-content/html/card/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,9 @@ export * from "./profile-card";
1616
export * from "./testimonial-card";
1717
export * from "./card-with-list";
1818
export * from "./text-only-card";
19+
export * from "./card-with-tabs";
20+
export * from "./card-with-bottom-image";
21+
export * from "./card-with-animation";
22+
export * from "./card-with-alert";
23+
export * from "./card-with-centered-content";
1924
export * from "./card-with-hover";

0 commit comments

Comments
 (0)