22+ Free Widget examples in Tailwind CSS

Music Player

WYSIWYG Editor Form

Form with CKEditor

Sticky fullpage pages / slides

Working back to top button

The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Read more / Show more button with hide button

"hide" button that appears when the additional content is displayed:

Speedometer Example

Internet speed meter, gauge meter

Detect Screen Breakpoints with Tailwind CSS

Working reading progress bar

show how much of the page has been scrolled

Number counter input

Simple count down timer

Strong password generator

With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

Simple count down timer

Code Block with Copy Button

this example uses clipboard.js to copy the code

Periodic Table with Tailwind CSS