forked from mdbootstrap/TW-Elements
-
Notifications
You must be signed in to change notification settings - Fork 0
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 mdbootstrap#2 from creativetimofficial/feature/v1.…
…0.0-beta Feature/v1.0.0 beta
- Loading branch information
Showing
335 changed files
with
25,954 additions
and
774 deletions.
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 |
|---|---|---|
|
|
@@ -14,6 +14,7 @@ | |
|
|
||
| # production | ||
| /build | ||
| /packages/@material-tailwind | ||
|
|
||
| # misc | ||
| .DS_Store | ||
|
|
||
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,93 @@ | ||
| --- | ||
| title: Tailwind CSS Alert - Material Tailwind | ||
| description: HTML Alert component with Tailwind CSS. | ||
| navigation: ["alert", "simple alert", "alert with gradient"] | ||
| --- | ||
|
|
||
| # Tailwind CSS Alerts | ||
|
|
||
| Get started on your web projects with our Tailwind CSS alert which provides contextual feedback messages for typical user actions. | ||
|
|
||
| <br /> | ||
| An alert displays a short and important message attracting the user's attention without | ||
| interrupting the user's task. Use this element when you need to show highly-important | ||
| messages to users or when you need a persistent static container that is closable | ||
| by user actions. | ||
| <br /> | ||
| Below we are presenting 2 examples of alerts that you can use in your Tailwind CSS | ||
| and React project. The examples come in different colors and styles so you can adapt | ||
| them easily to your needs. | ||
| <br /> | ||
| <ComponentCard id="alert"> | ||
| <div className="alert alert-pink w-full">Alert primary</div> | ||
| </ComponentCard> | ||
|
|
||
| ```html showLineNumbers | ||
| <div className="alert alert-pink w-full">Alert primary</div> | ||
| ``` | ||
|
|
||
| {" "} | ||
| <br /> | ||
| <br /> | ||
|
|
||
| ### Simple Alert | ||
|
|
||
| Use this example to create a simple and versatile alert component. | ||
|
|
||
| {" "} | ||
| <br /> | ||
| <ComponentCard id="simple-alert"> | ||
| <div className="alert alert-pink w-full">Alert primary</div> | ||
| <div className="alert alert-secondary w-full">Alert secondary</div> | ||
| <div className="alert alert-green w-full">Alert success</div> | ||
| <div className="alert alert-red w-full">Alert danger</div> | ||
| <div className="alert alert-orange w-full">Alert warning</div> | ||
| <div className="alert alert-blue w-full">Alert info</div> | ||
| <div className="alert alert-dark w-full">Alert Dark</div> | ||
| </ComponentCard> | ||
|
|
||
| ```html showLineNumbers | ||
| <div className="alert alert-pink w-full">Alert primary</div> | ||
| <div className="alert alert-secondary w-full">Alert secondary</div> | ||
| <div className="alert alert-green w-full">Alert success</div> | ||
| <div className="alert alert-red w-full">Alert danger</div> | ||
| <div className="alert alert-orange w-full">Alert warning</div> | ||
| <div className="alert alert-blue w-full">Alert info</div> | ||
| <div className="alert alert-dark w-full">Alert Dark</div> | ||
| ``` | ||
|
|
||
| {" "} | ||
| <br /> | ||
| <br /> | ||
|
|
||
| ### Alert with gradient | ||
|
|
||
| Use this example to create a simple and versatile alert component. | ||
|
|
||
| {" "} | ||
| <br /> | ||
| <ComponentCard id="alert with gradient"> | ||
| <div className="alert alert-gradient alert-pink w-full">Alert primary</div> | ||
| <div className="alert alert-gradient alert-secondary w-full"> | ||
| Alert secondary | ||
| </div> | ||
| <div className="alert alert-gradient alert-green w-full">Alert success</div> | ||
| <div className="alert alert-gradient alert-red w-full">Alert danger</div> | ||
| <div className="alert alert-gradient alert-orange w-full">Alert warning</div> | ||
| <div className="alert alert-gradient alert-blue w-full">Alert info</div> | ||
| <div className="alert alert-gradient alert-light w-full">Alert Light</div> | ||
| <div className="alert alert-gradient alert-dark w-full">Alert Dark</div> | ||
| </ComponentCard> | ||
|
|
||
| ```html showLineNumbers | ||
| <div className="alert alert-gradient alert-pink w-full">Alert primary</div> | ||
| <div className="alert alert-gradient alert-secondary w-full"> | ||
| Alert secondary | ||
| </div> | ||
| <div className="alert alert-gradient alert-green w-full">Alert success</div> | ||
| <div className="alert alert-gradient alert-red w-full">Alert danger</div> | ||
| <div className="alert alert-gradient alert-orange w-full">Alert warning</div> | ||
| <div className="alert alert-gradient alert-blue w-full">Alert info</div> | ||
| <div className="alert alert-gradient alert-light w-full">Alert Light</div> | ||
| <div className="alert alert-gradient alert-dark w-full">Alert Dark</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,109 @@ | ||
| --- | ||
| title: Tailwind CSS Avatar - Material Tailwind | ||
| description: HTML Avatar component with Tailwind CSS. | ||
| navigation: ["avatar", "avatar-style", "avatar-sizes"] | ||
| --- | ||
|
|
||
| # Tailwind CSS Avatar | ||
|
|
||
| Get started on your web projects with our Tailwind CSS avatar which provides contextual feedback messages for typical user actions. | ||
|
|
||
| <br /> | ||
|
|
||
| <ComponentCard id="avatar"> | ||
| <a href="#" className="avatar"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| </ComponentCard> | ||
|
|
||
| ```html showLineNumbers | ||
| <a href="#" className="avatar"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| ``` | ||
|
|
||
| {" "} | ||
|
|
||
| <br /> | ||
| <br /> | ||
|
|
||
| ### Avatar Styles | ||
|
|
||
| Get started on your web projects with our Tailwind CSS avatar which provides contextual feedback messages for typical user actions. | ||
|
|
||
| <br /> | ||
|
|
||
| <ComponentCard id="avatar-style"> | ||
| <div className="flex"> | ||
| <a href="#" className="avatar mr-3"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| </div> | ||
| </ComponentCard> | ||
|
|
||
| ```html showLineNumbers | ||
| <a href="#" className="avatar"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| ``` | ||
|
|
||
| {" "} | ||
|
|
||
| <br /> | ||
| <br /> | ||
|
|
||
| ### Avatar Sizes | ||
|
|
||
| Get started on your web projects with our Tailwind CSS avatar which provides contextual feedback messages for typical user actions. | ||
|
|
||
| <br /> | ||
|
|
||
| <ComponentCard id="avatar-sizes"> | ||
| <div className="flex"> | ||
| <a href="#" className="avatar avatar-circular avatar-xs mr-3"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-sm mr-3"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-md mr-3"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-lg mr-3"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-xl mr-3"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-xxl mr-3"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| </div> | ||
| </ComponentCard> | ||
|
|
||
| ```html showLineNumbers | ||
| <a href="#" className="avatar avatar-circular avatar-xs"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-sm"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-md"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-lg"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-xl"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| <a href="#" className="avatar avatar-circular avatar-xxl"> | ||
| <img alt="Image placeholder" src="/img/face-2.jpg" /> | ||
| </a> | ||
| ``` |
Oops, something went wrong.