DEV Community

Cover image for Wickedpopups

18 free Tailwind CSS Dialogs, Signups & Social popups for your next project.
Michael Andreuzza
Michael Andreuzza

Posted on

Wickedpopups 18 free Tailwind CSS Dialogs, Signups & Social popups for your next project.

Hello everyone!

So, weeks ago I was about to work on my other project and I saw that my family was going to be away probably the whole day, and that meant zero distractions.

The Pop Ups are made for Tailwind CSS and are 100% free!

So I decided to challenge myself to build the product and this what I had to do :

  • Design and build the popups.
  • Design and build the website where this will be displayed.
  • Design the logo.
  • Design the open graph.
  • Design and make favicons.
  • Pack it up.
  • Upload it on Gumroad.
  • Deploy on Netlify.
  • Get domain and link it.
  • Wait for propagation.

Optional

  • Tweet my progress during the day.

And then...

I tweeted around 9.44 about the idea, and around 10.30 - 11.00 I was already working on the popups. I had to do some dad and husband things after they came home and it took away time from the challenge.

I was done around 23.30

It was fun,... feel free to ask me here or on twitter:

How to use them?

Set up

Opening the files.
Every popup comes on a complete HTML file with the head and body tags
Open the HTML file with a code editor and if you do not have Tailwind installed or the CDN no worries, the link is included on the file, but is comented. If you want to learn how to install it locally, feel free to look at their docs.

Plugins

The popups are using the Forms plugin. It is not necesary for the pop ups to work, this plugin styles your forms, inputs, checkboxes... Download it here if you want and need:

Style

Colors are amazing, and some of them are used on the popups, you can get the list on Tailwind's documentation page.
Good to know

  • The pop ups are only coded with HTML and style with Tailwind CSS classes, you will have to make them dynamic yourself, at the moment.

  • All the popups comes with coments so you know what is what.
    Quick look into the code

The classes are sorted with Headwind, a VS Code plugin to sort Tailwind Classes and is the standard way to sort them.

Is not needed, but you get it here:
/Mike

Discussion (0)