Skip to content

Commit 8ce5dc9

Browse files
dragosctdragosct
authored
Merge pull request creativetimofficial#825 from creativetimofficial/@material-tailwind/html-v2.3.2
@Material tailwind/html v2.3.2
2 parents 91f06c0 + e76f1ac commit 8ce5dc9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+2334
-2224
lines changed

‎docs-content/html/avatar/avatar-with-border.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ export function AvatarWithBorder() {
44
<img
55
src="https://docs.material-tailwind.com/img/face-2.jpg"
66
alt="avatar"
7-
className="relative inline-block h-12 w-12 !rounded-full border-2 border-gray-900 object-cover object-center p-0.5"
7+
className="relative inline-block h-12 w-12 !rounded-full border border-slate-800 object-cover object-center p-0.5"
88
/>
99
<img
1010
src="https://docs.material-tailwind.com/img/face-2.jpg"
1111
alt="avatar"
12-
className="relative inline-block h-12 w-12 rounded-lg border-2 border-green-500 object-cover object-center p-0.5"
12+
className="relative inline-block h-12 w-12 rounded-lg border border-green-600 object-cover object-center p-0.5"
1313
/>
1414
<img
1515
src="https://docs.material-tailwind.com/img/face-2.jpg"
1616
alt="avatar"
17-
className="relative inline-block h-12 w-12 !rounded-none border-2 border-pink-500 object-cover object-center p-0.5"
17+
className="relative inline-block h-12 w-12 !rounded-none border border-pink-600 object-cover object-center p-0.5"
1818
/>
1919
</div>
2020
);

‎docs-content/html/avatar/avatar-with-dot-indicator.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,31 @@ export function AvatarWithDotIndicator() {
77
alt="avatar"
88
className="relative inline-block h-12 w-12 rounded-full object-cover object-center"
99
/>
10-
<span className="absolute right-[14%] top-[14%] grid min-h-[12px] min-w-[12px] -translate-y-2/4 translate-x-2/4 place-items-center rounded-full border-2 border-white bg-green-500 px-1 py-1 text-xs font-medium leading-none text-white content-['']"></span>
10+
<span className="absolute right-[14%] top-[14%] grid min-h-[12px] min-w-[12px] -translate-y-2/4 translate-x-2/4 place-items-center rounded-full border border-white bg-green-500 px-1 py-1 text-xs font-medium leading-none text-white content-['']"></span>
1111
</div>
1212
<div className="relative inline-flex">
1313
<img
1414
src="https://docs.material-tailwind.com/img/face-2.jpg"
1515
alt="avatar"
1616
className="relative inline-block h-12 w-12 rounded-lg object-cover object-center"
1717
/>
18-
<span className="absolute right-[2%] top-[4%] grid min-h-[12px] min-w-[12px] -translate-y-2/4 translate-x-2/4 place-items-center rounded-full border-2 border-white bg-green-500 px-1 py-1 text-xs font-medium leading-none text-white content-['']"></span>
18+
<span className="absolute right-[2%] top-[4%] grid min-h-[12px] min-w-[12px] -translate-y-2/4 translate-x-2/4 place-items-center rounded-full border border-white bg-green-500 px-1 py-1 text-xs font-medium leading-none text-white content-['']"></span>
1919
</div>
2020
<div className="relative inline-flex">
2121
<img
2222
src="https://docs.material-tailwind.com/img/face-2.jpg"
2323
alt="avatar"
2424
className="relative inline-block h-12 w-12 rounded-full object-cover object-center"
2525
/>
26-
<span className="absolute bottom-[14%] right-[14%] grid min-h-[12px] min-w-[12px] translate-x-2/4 translate-y-2/4 place-items-center rounded-full border-2 border-white bg-red-500 px-1 py-1 text-xs font-medium leading-none text-white content-['']"></span>
26+
<span className="absolute bottom-[14%] right-[14%] grid min-h-[12px] min-w-[12px] translate-x-2/4 translate-y-2/4 place-items-center rounded-full border border-white bg-red-500 px-1 py-1 text-xs font-medium leading-none text-white content-['']"></span>
2727
</div>
2828
<div className="relative inline-flex">
2929
<img
3030
src="https://docs.material-tailwind.com/img/face-2.jpg"
3131
alt="avatar"
3232
className="relative inline-block h-12 w-12 rounded-lg object-cover object-center"
3333
/>
34-
<span className="absolute bottom-[4%] right-[2%] grid min-h-[12px] min-w-[12px] translate-x-2/4 translate-y-2/4 place-items-center rounded-full border-2 border-white bg-red-500 px-1 py-1 text-xs font-medium leading-none text-white content-['']"></span>
34+
<span className="absolute bottom-[4%] right-[2%] grid min-h-[12px] min-w-[12px] translate-x-2/4 translate-y-2/4 place-items-center rounded-full border border-white bg-red-500 px-1 py-1 text-xs font-medium leading-none text-white content-['']"></span>
3535
</div>
3636
</div>
3737
);

‎docs-content/html/avatar/avatar-with-text.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ export function AvatarWithText() {
88
className="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
99
/>
1010
<div>
11-
<h6 className="block font-sans text-base font-semibold leading-relaxed tracking-normal text-inherit antialiased">
11+
<h6 className="text-slate-800 font-semibold">
1212
Tania Andrew
1313
</h6>
14-
<p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
14+
<p className="text-slate-600 text-sm">
1515
Web Developer
1616
</p>
1717
</div>
@@ -23,10 +23,10 @@ export function AvatarWithText() {
2323
className="relative inline-block h-12 w-12 rounded-lg object-cover object-center"
2424
/>
2525
<div>
26-
<h6 className="block font-sans text-base font-semibold leading-relaxed tracking-normal text-inherit antialiased">
26+
<h6 className="text-slate-800 font-semibold">
2727
Tania Andrew
2828
</h6>
29-
<p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
29+
<p className="text-slate-600 text-sm">
3030
Web Developer
3131
</p>
3232
</div>
@@ -38,10 +38,10 @@ export function AvatarWithText() {
3838
className="relative inline-block h-12 w-12 !rounded-none object-cover object-center"
3939
/>
4040
<div>
41-
<h6 className="block font-sans text-base font-semibold leading-relaxed tracking-normal text-inherit antialiased">
41+
<h6 className="text-slate-800 font-semibold">
4242
Tania Andrew
4343
</h6>
44-
<p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
44+
<p className="text-slate-600 text-sm">
4545
Web Developer
4646
</p>
4747
</div>

‎docs-content/html/breadcrumbs/block-level-breadcrumbs.tsx

+9-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
export function BlockLevelBreadcrumbs() {
22
return (
3-
<nav aria-label="breadcrumb" className="block w-full">
4-
<ol className="flex w-full flex-wrap items-center rounded-md bg-blue-gray-50 bg-opacity-60 px-4 py-2">
5-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
6-
<a href="#" className="opacity-60">
7-
Docs
8-
</a>
9-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
3+
<nav aria-label="breadcrumb" className="w-full">
4+
<ol className="flex w-full flex-wrap items-center rounded-md bg-slate-50 px-4 py-2">
5+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
6+
<a href="#">Docs</a>
7+
<span className="pointer-events-none mx-2 text-slate-800">
108
/
119
</span>
1210
</li>
13-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
14-
<a href="#" className="opacity-60">
15-
Components
16-
</a>
17-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
11+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
12+
<a href="#">Components</a>
13+
<span className="pointer-events-none mx-2 text-slate-800">
1814
/
1915
</span>
2016
</li>
21-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
17+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
2218
<a href="#">Breadcrumbs</a>
2319
</li>
2420
</ol>

‎docs-content/html/breadcrumbs/breadcrumbs-custom-separator.tsx

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
export function BreadcrumbsCustomSeparator() {
22
return (
33
<nav aria-label="breadcrumb" className="w-max">
4-
<ol className="flex w-full flex-wrap items-center rounded-md bg-blue-gray-50 bg-opacity-60 px-4 py-2">
5-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
6-
<a href="#" className="opacity-60">
7-
Docs
8-
</a>
9-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
4+
<ol className="flex w-full flex-wrap items-center rounded-md bg-slate-50 px-4 py-2">
5+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
6+
<a href="#">Docs</a>
7+
<span className="pointer-events-none mx-2 text-slate-800">
108
-
119
</span>
1210
</li>
13-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
14-
<a href="#" className="opacity-60">
15-
Components
16-
</a>
17-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
11+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
12+
<a href="#">Components</a>
13+
<span className="pointer-events-none mx-2 text-slate-800">
1814
-
1915
</span>
2016
</li>
21-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
17+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
2218
<a href="#">Breadcrumbs</a>
2319
</li>
2420
</ol>

‎docs-content/html/breadcrumbs/breadcrumbs-custom-styles.tsx

+11-39
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,33 @@
11
export function BreadcrumbsCustomStyles() {
22
return (
33
<nav aria-label="breadcrumb" className="w-max">
4-
<ol className="flex w-full flex-wrap items-center rounded-full border border-white bg-blue-gray-50 bg-opacity-60 bg-gradient-to-tr from-gray-900 to-gray-800 p-1">
5-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
4+
<ol className="flex w-full flex-wrap items-center rounded-full border border-white bg-slate-800 p-1">
5+
<li className="flex cursor-pointer items-center text-sm text-white transition-colors duration-300">
66
<a
77
href="#"
8-
className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
8+
className="px-3 py-1 hover:underline"
99
>
1010
Docs
1111
</a>
12-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
13-
<svg
14-
xmlns="http://www.w3.org/2000/svg"
15-
fill="none"
16-
viewBox="0 0 24 24"
17-
stroke-width="2.5"
18-
stroke="currentColor"
19-
aria-hidden="true"
20-
className="h-4 w-4 text-white"
21-
>
22-
<path
23-
stroke-linecap="round"
24-
stroke-linejoin="round"
25-
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
26-
></path>
27-
</svg>
12+
<span className="pointer-events-none mx-2 text-white">
13+
-
2814
</span>
2915
</li>
30-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
16+
<li className="flex cursor-pointer items-center text-sm text-white transition-colors duration-300">
3117
<a
3218
href="#"
33-
className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
19+
className="px-3 py-1 hover:underline"
3420
>
3521
Components
3622
</a>
37-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
38-
<svg
39-
xmlns="http://www.w3.org/2000/svg"
40-
fill="none"
41-
viewBox="0 0 24 24"
42-
stroke-width="2.5"
43-
stroke="currentColor"
44-
aria-hidden="true"
45-
className="h-4 w-4 text-white"
46-
>
47-
<path
48-
stroke-linecap="round"
49-
stroke-linejoin="round"
50-
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
51-
></path>
52-
</svg>
23+
<span className="pointer-events-none mx-2 text-white">
24+
-
5325
</span>
5426
</li>
55-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
27+
<li className="flex cursor-pointer items-center text-sm text-white transition-colors duration-300">
5628
<a
5729
href="#"
58-
className="rounded-full bg-white px-3 py-1 font-medium text-gray-900"
30+
className="px-3 py-1 hover:underline"
5931
>
6032
Breadcrumbs
6133
</a>

‎docs-content/html/breadcrumbs/breadcrumbs-with-icon.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
export function BreadcrumbsWithIcon() {
22
return (
33
<nav aria-label="breadcrumb" className="w-max">
4-
<ol className="flex w-full flex-wrap items-center rounded-md bg-blue-gray-50 bg-opacity-60 px-4 py-2">
5-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
6-
<a href="#" className="opacity-60">
4+
<ol className="flex w-full flex-wrap items-center rounded-md bg-slate-50 px-4 py-2">
5+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
6+
<a href="#">
77
<svg
88
xmlns="http://www.w3.org/2000/svg"
99
className="h-4 w-4"
@@ -13,19 +13,17 @@ export function BreadcrumbsWithIcon() {
1313
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
1414
</svg>
1515
</a>
16-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
16+
<span className="pointer-events-none mx-2 text-slate-800">
1717
/
1818
</span>
1919
</li>
20-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
21-
<a href="#" className="opacity-60">
22-
<span>Components</span>
23-
</a>
24-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
20+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
21+
<a href="#">Components</a>
22+
<span className="pointer-events-none mx-2 text-slate-800">
2523
/
2624
</span>
2725
</li>
28-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
26+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
2927
<a href="#">Breadcrumbs</a>
3028
</li>
3129
</ol>

‎docs-content/html/breadcrumbs/breadcrumbs.tsx

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
export function BreadcrumbsDefault() {
22
return (
33
<nav aria-label="breadcrumb" className="w-max">
4-
<ol className="flex w-full flex-wrap items-center rounded-md bg-blue-gray-50 bg-opacity-60 px-4 py-2">
5-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
6-
<a href="#" className="opacity-60">
7-
Docs
8-
</a>
9-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
4+
<ol className="flex w-full flex-wrap items-center rounded-md bg-slate-50 px-4 py-2">
5+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
6+
<a href="#">Docs</a>
7+
<span className="pointer-events-none mx-2 text-slate-800">
108
/
119
</span>
1210
</li>
13-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
14-
<a href="#" className="opacity-60">
15-
Components
16-
</a>
17-
<span className="pointer-events-none mx-2 select-none font-sans text-sm font-normal leading-normal text-blue-gray-500 antialiased">
11+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
12+
<a href="#">Components</a>
13+
<span className="pointer-events-none mx-2 text-slate-800">
1814
/
1915
</span>
2016
</li>
21-
<li className="flex cursor-pointer items-center font-sans text-sm font-normal leading-normal text-blue-gray-900 antialiased transition-colors duration-300 hover:text-light-blue-500">
17+
<li className="flex cursor-pointer items-center text-sm text-slate-500 transition-colors duration-300 hover:text-slate-800">
2218
<a href="#">Breadcrumbs</a>
2319
</li>
2420
</ol>

‎docs-content/html/collapse/default-collapse.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
export function DefaultCollapse() {
22
return (
33
<>
4-
<button
5-
data-ripple-light="true"
4+
<button
65
data-collapse-target="collapse"
7-
className="mb-4 select-none rounded-lg bg-gray-900 px-6 py-3 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
8-
>
6+
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">
97
Open Collapse
108
</button>
119
<div
1210
data-collapse="collapse"
1311
className="block h-0 w-full basis-full overflow-hidden transition-all duration-300 ease-in-out"
1412
>
15-
<div className="relative mx-auto flex w-8/12 flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
16-
<div className="p-6">
17-
<p className="block font-sans text-base font-light leading-relaxed text-inherit antialiased">
13+
<div className="relative mx-auto flex w-8/12 flex-col rounded-lg bg-white border border-slate-200 shadow-sm mt-4">
14+
<div className="p-4">
15+
<p className="text-slate-600 font-light">
1816
Use our Tailwind CSS collapse for your website. You can use if for
1917
accordion, collapsible items and much more.
2018
</p>

0 commit comments

Comments
 (0)