-
-
Notifications
You must be signed in to change notification settings - Fork 329
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #824 from creativetimofficial/@material-tailwind/h…
…tml-cards-seo @Material tailwind/html new cards
- Loading branch information
Showing
8 changed files
with
412 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| export function CardWithAlert() { | ||
| return ( | ||
| <div className="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2"> | ||
| <div className="relative flex w-full p-3 pr-12 text-sm text-white bg-red-500 rounded-md"> | ||
| <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"> | ||
| <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" /> | ||
| </svg> | ||
| Please update your card details. | ||
| <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"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="h-5 w-5" strokeWidth="2"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| <div className="p-3"> | ||
| <div className="flex items-center mb-2"> | ||
| <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"> | ||
| <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" /> | ||
| </svg> | ||
| <h5 className="ml-2 text-slate-800 text-xl font-semibold"> | ||
| Custom CMS for startup | ||
| </h5> | ||
| </div> | ||
| <p className="block text-slate-600 leading-normal font-light mb-4"> | ||
| Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others. | ||
| </p> | ||
| <div> | ||
| <a href="#" className="text-slate-800 font-semibold text-sm hover:underline flex items-center"> | ||
| Learn More | ||
| <svg xmlns="http://www.w3.org/2000/svg" className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| export function CardWithAnimation() { | ||
| return ( | ||
| <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"> | ||
| <div className="relative h-56 m-2.5 overflow-hidden text-white rounded-md"> | ||
| <img className="transition-transform duration-500 ease-[cubic-bezier(0.25, 1, 0.5, 1)] transform group-hover:scale-110" | ||
| src="https://images.unsplash.com/photo-1496436818536-e239445d3327?q=80&w=1200" alt="investment-seed-round" /> | ||
| </div> | ||
| <div className="p-4"> | ||
| <h6 className="mb-2 text-slate-800 text-xl font-semibold"> | ||
| Successful Seed Round | ||
| </h6> | ||
| <p className="text-slate-600 leading-normal font-light"> | ||
| We are thrilled to announce the completion of our seed round, securing $2M in investment to fuel product development and market expansion. | ||
| </p> | ||
| </div> | ||
| <div className="px-4 pb-4 pt-0 mt-2"> | ||
| <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"> | ||
| Read article | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| export function CardWithBottomImage() { | ||
| return ( | ||
| <div className="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96"> | ||
| <div className="p-4"> | ||
| <h6 className="mb-2 text-slate-800 text-xl font-semibold"> | ||
| Special News Article | ||
| </h6> | ||
| <p className="text-slate-600 leading-normal font-light"> | ||
| The place is close to Barceloneta Beach and bus stop just 2 min by walk | ||
| and near to "Naviglio" where you can enjoy the main night life in | ||
| Barcelona. | ||
| </p> | ||
| </div> | ||
| <div className="relative h-56 m-2.5 overflow-hidden text-white rounded-md"> | ||
| <img src="https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=1200" alt="card-image" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| export function CardWithCenteredContent() { | ||
| return ( | ||
| <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"> | ||
| <div className="p-3 text-center"> | ||
| <div className="flex justify-center mb-4"> | ||
| <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"> | ||
| <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" /> | ||
| <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" /> | ||
| </svg> | ||
|
|
||
| </div> | ||
| <div className="flex justify-center mb-2"> | ||
| <h5 className="text-slate-800 text-2xl font-semibold"> | ||
| Lit Ideas for Startups | ||
| </h5> | ||
| </div> | ||
| <p className="block text-slate-600 leading-normal font-light mb-4 max-w-lg"> | ||
| Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others. | ||
| </p> | ||
| <div className="text-center"> | ||
| <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"> | ||
| View More | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| export function CardWithTabs() { | ||
| return ( | ||
| <div className="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96 p-2"> | ||
| <div className="w-full"> | ||
| <ul className="relative flex flex-wrap px-1.5 py-1.5 list-none rounded-md bg-slate-100" data-tabs="tabs" role="list"> | ||
| <li className="z-30 flex-auto text-center"> | ||
| <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" | ||
| data-tab-target="" role="tab" aria-selected="true" aria-controls="dashboard"> | ||
| Dashboard | ||
| </a> | ||
| </li> | ||
| <li className="z-30 flex-auto text-center"> | ||
| <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" | ||
| data-tab-target="" role="tab" aria-selected="false" aria-controls="profile"> | ||
| Profile | ||
| </a> | ||
| </li> | ||
| <li className="z-30 flex-auto text-center"> | ||
| <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" | ||
| data-tab-target="" role="tab" aria-selected="false" aria-controls="settings"> | ||
| Settings | ||
| </a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <div data-tab-content="" className="p-3"> | ||
| <div id="dashboard" role="tabpanel"> | ||
| <h5 className="mb-2 text-slate-800 text-xl font-semibold"> | ||
| Website Review Check Text | ||
| </h5> | ||
| <p className="text-slate-600 leading-normal font-light"> | ||
| Because it's about motivating the doers. Because I'm | ||
| here to follow my dreams and inspire other people to follow their | ||
| dreams, too. | ||
| </p> | ||
| </div> | ||
| <div className="hidden opacity-0" id="profile" role="tabpanel"> | ||
| <h5 className="mb-2 text-slate-800 text-xl font-semibold"> | ||
| The place is close to Barceloneta | ||
| </h5> | ||
| <p className="text-slate-600 leading-normal font-light"> | ||
| The reading of all good books is like a conversation with the | ||
| finest minds of past centuries. Follow my dreams and inspire other people. | ||
| </p> | ||
| </div> | ||
| <div className="hidden opacity-0" id="settings" role="tabpanel"> | ||
| <h5 className="mb-2 text-slate-800 text-xl font-semibold"> | ||
| Close to Barceloneta | ||
| </h5> | ||
| <p className="text-slate-600 leading-normal font-light"> | ||
| Comparing yourself to others is the thief of joy. | ||
| The reading of all good books is like a conversation | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.