Coming Soon Page with Countdown Timer using Tailwind CSS & Alpine JS

Build a simple yet brilliant coming soon page using Tailwind CSS and Alpine JS, with a countdown timer and an email input with a floating label.
What you will learn:
- Building various components with Flexbox
- Adding custom fonts
- Arbitarary values in 'JIT' mode
- Responsive layouts
- Floating label for input using sibling selector
GitHub Repositories:
Starter template: github.com/ThirusOfficial/ins...
Complete project: github.com/ThirusOfficial/tai...
------
This video is sponsored by Showwcase: Join me - www.showwcase.com using the invite code "joinshrutibalasa"
------
Bootstrap template by Inovatik: inovatik.com/petals-coming-so...
Background SVG image credits: www.svgbackgrounds.com
------
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibalasa.com
#tailwind #alpine #tailwindcss #alpinejs #comingsoon #countdowntimer

[@roodborstkalf9664]

Nice work.

[@Thirus]

Thank you!

[@ahallock]

Amazing! People argue against Tailwind because they say it's just like using the style attribute, but just look at how awesome the peer utility is.

[@Thirus]

Yea exactly!

[@PcHabitat]

Awesome, cant wait

[@dev_jeongdaeri]

Super awesome!!!!!!

[@Thirus]

Thank you!

[@serpe21285]

Thank you for this great tutorial, I love it, it is very usefully.

[@Thirus]

You’re welcome!

[@phoenixedge4049]

Awesome! Please make more Tailwind and Alpine videos!

[@Thirus]

Yes I will. Any particular concept?

[@phoenixedge4049]

@@Thirus I’d love to see a video on a calculator in Alpine.js. I recently had to build one for a client on a checkout page where you select the dimensions of the item, select the unit (feet or meters) the type of material (different materials have different price per sq ft or sq meter), and could add additional options that would increase the price, and it calculated out the final price of the product. I couldn’t find a good tutorial for it anywhere in alpine. I gave up and resorted to plain JavaScript, so I’d love to see it done in Alpine. Front End Mentor has some great concepts there too you could do!

[@Thirus]

Sounds interesting! Yes, I should check out one of the front end mentor challenges

[@phoenixedge4049]

@@Thirus Looking forward to it! Thanks for all you do for the Tailwind and Alpine community! You're one of the people who really sold me on using them, and I have built a few client projects now using knowledge gained from your videos!

[@rangabharath4253]

Awesome

[@Thirus]

Thanks!

[@FFNEWS24]

Mam please make javascript full course with projects

[@hi-yi7en]

👍

[@jonpersson9962]

Great tutorial - the Javascript portion was very helpful. Given how long the video was, perhaps it would make sense to add timestamps in the future so that people can easily find the content they're looking for?

[@Thirus]

I’m glad it was helpful. Good suggestion Jon. I’ll try and do that

[@karthick...]

Thank you can you make carousel tutorial in tailwind

[@neerajsinghtangariya2587]

Wow nice...+1 :)

[@Thirus]

Thank you!

[@utkarsh_katiyar]

Hi ma'am, do you have any tutorial for "Skills" Section used in Portfolio Websites ?

[@Thirus]

You mean, the percentages or progress bars we usually see? I recommend against using those.

[@utkarsh_katiyar]

@@Thirus oh, then can you suggest what we can do instead of that, Can I use img of Skills, popping on the screen or maybe static images?

[@Thirus]

How about something like this? encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSm76zTxp6pDgev4ONNk10v3Teav4lKsZNiQQ&usqp=CAU
Or you could use logos of Html, CSS and so on

[@utkarsh_katiyar]

@@Thirus Yeah, logos sounds good, I'll use them, thanks 😊

[@10XDRAGON]

This was a great tutorial. One slight issue is that you need to enclose the entire variable formula in the parentheses for minutes, hours and days otherwise it will still show 1 digit under 10 still. It worked for seconds since it was enclosed.
let counter = setInterval( ()=> {
this.now = new Date().getTime();
this.timeLeft = (this.endTime - this.now)/1000;
this.seconds = this.format(this.timeLeft % 60);
this.minutes = this.format((this.timeLeft/60) % 60);
this.hours = this.format((this.timeLeft / 3600) % 24);
this.days = this.format((this.timeLeft / (60 * 60 * 24)));

[@Thirus]

Thanks for sharing

[@jasonhackson2805]

Hello, can you make a video on how to get alpine js working using npm or yarn with react js. will be much appreciated. thanksy

[@Thirus]

Why would you want to use Alpine with React?

[@jasonhackson2805]

@@Thirus I liked the way it handles javascript. it's far easier compared to usng states in react js. i ain't a pro, so i might still be wrong.

[@Thirus]

Okay, this post might help you. codewithhugo.com/alpine-js-react/
I don’t know React, so I personally can’t help.

[@jasonhackson2805]

ok Thanks