](https://tailwind-elements.com/) 
-
+# Tailwind Elements [](https://tailwind-elements.com/)
Tailwind Elements **is a plugin** that extends the functionality of the library with many interactive components.
In some dynamic components (like dropdowns or modals) we add Font Awesome icons and custom JavaScript. However, they do not require any additional installation, all the necessary code is always included in the example and copied to any Tailwind project - it will work.
-
| - # - | -- First - | -- Last - | -- Handle - | -
|---|---|---|---|
| 1 | -- Mark - | -- Otto - | -- @mdo - | -
| 2 | -- Jacob - | -- Thornton - | -- @fat - | -
| 3 | -- Larry - | -- Wild - | -- @twitter - | -
| Class | -Heading | -Heading | -
|---|---|---|
| - Default - | -- Cell - | -- Cell - | -
| - Primary - | -- Cell - | -- Cell - | -
| - Secondary - | -- Cell - | -- Cell - | -
| - Success - | -- Cell - | -- Cell - | -
| - Danger - | -- Cell - | -- Cell - | -
| - Warning - | -- Cell - | -- Cell - | -
| - Info - | -- Cell - | -- Cell - | -
| - Light - | -- Cell - | -- Cell - | -
| Dark | -Cell | -Cell | -
| - # - | -- First - | -- Last - | -- Handle - | -
|---|---|---|---|
| 1 | -- Mark - | -- Otto - | -- @mdo - | -
| 2 | -- Jacob - | -- Thornton - | -- @fat - | -
| 3 | -- Larry the Bird - | -- @twitter - | -|
| - # - | -- First - | -- Last - | -- Handle - | -
|---|---|---|---|
| 1 | -- Mark - | -- Otto - | -- @mdo - | -
| 2 | -- Jacob - | -- Thornton - | -- @fat - | -
| 3 | -- Larry - | -- Wild - | -- @twitter - | -
| - # - | -- First - | -- Last - | -Handle | -
|---|---|---|---|
| - 1 - | -- Mark - | -- Otto - | -- @mdo - | -
| - 2 - | -- Jacob - | -- Thornton - | -- @fat - | -
| - 3 - | -- Larry the Bird - | -- @twitter - | -|
| # | -First | -Last | -Handle | -
|---|---|---|---|
| 1 | -- Mark - | -- Otto - | -- @mdo - | -
| 2 | -- Jacob - | -- Thornton - | -- @fat - | -
| 3 | -- Larry the Bird - | -- @twitter - | -|
| # | -First | -Last | -Handle | -
|---|---|---|---|
| 1 | -- Mark - | -- Otto - | -- @mdo - | -
| 2 | -- Jacob - | -- Thornton - | -- @fat - | -
| 3 | -- Larry the Bird - | -- @twitter - | -|
| # | -First | -Last | -Handle | -
|---|---|---|---|
| 1 | -- Mark - | -- Otto - | -- @mdo - | -
| 2 | -- Jacob - | -- Thornton - | -- @fat - | -
| 3 | -- Larry the Bird - | -- @twitter - | -|
| # | -First | -Last | -Handle | -
|---|---|---|---|
| 1 | -- Mark - | -- Otto - | -- @mdo - | -
| 2 | -- Jacob - | -- Thornton - | -- @fat - | -
| 3 | -- Larry the Bird - | -- @twitter - | -|
| - # - | -- Heading - | -- Heading - | -- Heading - | -- Heading - | -- Heading - | -- Heading - | -- Heading - | -- Heading - | -
|---|---|---|---|---|---|---|---|---|
| 1 | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -
| 2 | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -
| 3 | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -- Cell - | -
| - Name - | -- Title - | -- Status - | -- Role - | -- Edit - | -
|---|---|---|---|---|
|
-
-
-
-
- 
-
-
- Flora Wu
- flora.wu@example.com
- |
-
- Software engineer
- IT
- |
- - - Active - - | -Admin | -- Edit - | -
|
-
-
-
-
- 
-
-
- Nida Povey
- nida.povey@example.com
- |
-
- CMO
- Marketing
- |
- - - Active - - | -Member | -- Edit - | -
|
-
-
-
-
- 
-
-
- Warren Nixon
- warren.nixon@example.com
- |
-
- Designer
- UI/UX
- |
- - - Active - - | -Owner | -- Edit - | -
| - Name - | -- Title - | -- Email - | -- Role - | -- Edit - | -
|---|---|---|---|---|
|
-
-
-
-
- Flora Wu
- |
-
- Software engineer, IT
- |
-
- flora.wu@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Nida Povey
- |
-
- CMO, Marketing
- |
-
- nida.povey@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Warren Nixon
- |
-
- Designer, UI/UX
- |
-
- warren.nixon@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Flora Wu
- |
-
- Software engineer, IT
- |
-
- flora.wu@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Nida Povey
- |
-
- CMO, Marketing
- |
-
- nida.povey@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Warren Nixon
- |
-
- Designer, UI/UX
- |
-
- warren.nixon@example.com
- |
- Admin | -- Edit - | -
| - Name - | -- Title - | -- Email - | -- Role - | -- Edit - | -
|---|---|---|---|---|
|
-
-
-
-
- Flora Wu
- |
-
- Software engineer, IT
- |
-
- flora.wu@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Nida Povey
- |
-
- CMO, Marketing
- |
-
- nida.povey@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Warren Nixon
- |
-
- Designer, UI/UX
- |
-
- warren.nixon@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Flora Wu
- |
-
- Software engineer, IT
- |
-
- flora.wu@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Nida Povey
- |
-
- CMO, Marketing
- |
-
- nida.povey@example.com
- |
- Admin | -- Edit - | -
|
-
-
-
-
- Warren Nixon
- |
-
- Designer, UI/UX
- |
-
- warren.nixon@example.com
- |
- Admin | -- Edit - | -
MDBootstrap
-11 mins ago
- -- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non - commodo luctus. -
- -You can use the mark tag to highlight text.
-This line of text is meant to be treated as deleted text.
- This line of text is meant to be treated as no longer accurate.
-
- This line of text is meant to be treated as an addition to the document. -
-This line of text will render as underlined
-- This line of text is meant to be treated as fine print. -
-This line rendered as bold text.
-This line rendered as italicized text.
- ---- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. -
-
Start aligned text on all viewport sizes.
-Center aligned text on all viewport sizes.
-End aligned text on all viewport sizes.
- -Start aligned text on viewports sized SM (small) or wider.
-Start aligned text on viewports sized MD (medium) or wider.
-Start aligned text on viewports sized LG (large) or wider.
-Start aligned text on viewports sized XL (extra-large) or wider.
- -Lowercased text.
-Uppercased text.
-capitalized text.
- -Bold text.
-Bolder weight text (relative to the parent element).
-Normal weight text.
-Light weight text.
-Italic text.
- -- This is a long paragraph written to show how the line-height of an element is affected by - our utilities. Classes are applied to the element itself or sometimes the parent element. - These classes can be customized as needed with our utility API. -
-- This is a long paragraph written to show how the line-height of an element is affected by - our utilities. Classes are applied to the element itself or sometimes the parent element. - These classes can be customized as needed with our utility API. -
-- This is a long paragraph written to show how the line-height of an element is affected by - our utilities. Classes are applied to the element itself or sometimes the parent element. - These classes can be customized as needed with our utility API. -
-- This is a long paragraph written to show how the line-height of an element is affected by - our utilities. Classes are applied to the element itself or sometimes the parent element. - These classes can be customized as needed with our utility API. -
- -Ratio 21 x 9
- - - -Ratio 16 x 9
- - - -Ratio 4 x 3
- - - -Ratio 1 x 1
- - - -Hover to play
- - - -.jpg)
- .jpg)
- .jpg)
- 
- .accordion-body,
+ though the transition does limit overflow.
+ .accordion-flush class. This is the first item's
+ accordion body.
+ Basic
+Link
+With icon
+
+ class="w-32 rounded-full"
+ alt="Avatar" />
+ class="w-32 rounded-full shadow-lg"
+ alt="Avatar" />
+ class="w-32 rounded-lg"
+ alt="Avatar" />
- Web designer
+ class="mx-auto mb-4 w-32 rounded-full" + alt="Avatar" /> +Web designer
Button
+ + +Colors
+ + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + + +Pills
+ + + Primary + + + Secondary + + + Success + + + Danger + + + Warning + + + Info + + + Light + + + Dark + + +
+ class="h-auto max-w-full"
+ alt="..." />
+ class="max-w-sm rounded border bg-white p-1"
+ alt="..." />
+ class="h-auto max-w-sm shadow-lg"
+ alt="" />
+ class="h-auto max-w-sm shadow-none transition-shadow duration-300 ease-in-out hover:shadow-xl"
+ alt="" />
Standard
+Active example
+ + +Outline
+Outline with icon
+Basic
+ + +Hierarchy
+ + + + +Contextual
+ + + + + +Neutral
+ + + +Sizing
+ + + + +Rounded
+ + + + +Outline
+ + + + +Outline rounded
+ + + + +Floating
+ + + + +Floating outline
+ + + + +Button block
+ + + +With icon
+ + +Disabled
+ + ++ Some quick example text to build on the card title and make up the + bulk of the card's content. +
+ +
+
+ + Some quick example text to build on the card title and make up the + bulk of the card's content. +
+ +
+ + Some quick example text to build on the card title and make up the + bulk of the card's content. +
+Slides only
+
+ With controls
+
+ With indicators
+
+ Crossfade
+
+ Dark variant
+.webp)
+
+ 
+ John Doe
+
+
+
+
+ John Doe
+
+
+
+
+ John Doe
+
+
+
+ + + Link with href + + +
+ + ++ +
++ Toggle first element + + +
+
+ Vertical divider within div tag
+
+ Vertical divider within hr tag
+
+ Vertical blurry divider within div tag
+
+ Vertical blurry divider within hr tag
+
+ Vertical divider within hr tag
+
+ Vertical divider within div tag
+
+ Vertical blurry divider within hr tag
+
+ Vertical blurry divider within div tag
+
Blurry divider
+ +Standard divider
+ +Basic example
+.webp)
+ + Aligning the figure's caption is easy with our text utilities. +
+
+ 
+ style="cursor: zoom-in" />
+ style="cursor: zoom-in" />
+ style="cursor: zoom-in" />
+ style="cursor: zoom-in" />
+ style="cursor: zoom-in" />
+ style="cursor: zoom-in" />
+ class="mb-2 w-full md:mb-4" />
+ class="w-full" />
+ style="cursor: zoom-in" />
+ class="w-full" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Responsive images
+
+ Thumbnails
+
+ Shadows
+
+ Hover shadow
+
+ + Ripple (biorę z dokumentacji ripple, ale nie działa, nie wiem czemu) +
+
+
+ Masks
+
+ Can you see me?
+Hover effects
+
+
+
+
+ Shapes
+
+
+
+
+
+ + This is a simple hero unit, a simple jumbotron-style component for + calling extra attention to featured content or information. +
++ It uses utility classes for typography and spacing to space content + out within the larger container. +
+ +Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+Scroll down
+- This is an example of how the basic link looks in the - middle of the sentence. + This is an example of how the basic + link looks in the middle of the + sentence.
This is an example of how the - classic blue linkclassic primary link looks in the middle of the sentence.
@@ -59,7 +63,7 @@ This is the primary link @@ -69,7 +73,7 @@ This is the secondary link @@ -79,7 +83,7 @@ This is a success link @@ -89,7 +93,7 @@ This is a danger link @@ -99,7 +103,7 @@ This is a warning link @@ -109,7 +113,7 @@ This is an info link @@ -119,7 +123,7 @@ This is a light link @@ -129,7 +133,7 @@ This is a dark link @@ -137,10 +141,10 @@Basic
+Active item
+Disabled
+Links
+Buttons
+Flush
+
+ 
+ + Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex + ea commodo consequat. +
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Can you see me?
+
+
+
+
+
+
+
+
+
+
+
+
+ Basic example
+
+
+ Rgba color
+
+
+
+
+
+
+
+
+
+
+
+
+ Gradient
+
+
+ Opacity
+
+
+
+
+
+
+
+
+
+
+
+
+ Content
+
+ Can you see me?
+Ripple
+
+
+
+
+ Content
+
+ Can you see me?
+Link regular
+
+
+
+
+ Link with ripple
+
+
+
+
+ Gradient compositon
+
+
+
+
+
+
+ + You have a message! +
++ Anne just posted a photo +
+
+ 
+ + Some quick example text to build on the card title and make up the + bulk of the card's content. +
++ Unread notifications +
++ Unread notifications +
++ Unread notifications +
++ Unread notifications +
++ Unread notifications +
++ Unread notifications +
++ Unread notifications +
++ Unread notifications +
++ Unread notifications +
++ Unread notifications +
++ I will be the leader of a company that ends up being worth billions of + dollars, because I got the answers. I understand culture. I am the + nucleus. I think that’s a responsibility that I have, to push + possibilities, to show people, this is the level that things could be + at. +
+ ++ I will be the leader of a company that ends up being worth billions of + dollars, because I got the answers. I understand culture. I am the + nucleus. I think that’s a responsibility that I have, to push + possibilities, to show people, this is the level that things could be + at. +
+ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante. +
+ + +You can use the mark tag to highlight text.
+
+ This line of text is meant to be treated as deleted text.
+
+ This line of text is meant to be treated as no longer accurate.
+
+ This line of text is meant to be treated as an addition to the + document. +
+This line of text will render as underlined.
++ This line of text is meant to be treated as fine print. +
+This line rendered as bold text.
+This line rendered as italicized text.
+ +Basic example
+
+ + Some quick example text to build on the card title and make up the + bulk of the card's content. +
+ Go somewhere +How it works
+Width
+Colors
+Sizing
+Animation
++ +
+ ++ +
+ +Sign up
+ class="order-2 shrink-0 grow-0 basis-auto md:w-10/12 lg:order-1 lg:w-6/12 xl:w-5/12"> ++ Sign up +
+ 
+ .webp)
+ .webp)
+ 
+