Let's Build: With Tailwind CSS - Movie Production Landing Page - Part 1

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

====================

PART 1 of 2

⚙️Source code: https://github.com/justalever/tailwind-production-landing-page

Welcome to the next installment of my Let's Build: With Tailwind CSS series. In this tutorial, I'll be replicating a popular movie production landing page on Wix.com from scratch using Tailwind CSS.

The page is fully responsive and uses just a dash of JavaScript for the mobile menu interactivity.

Why replicate this template?

I chose this template as a starting point for a number of reasons:

• It's unique.
• It's probably not a page you think Tailwind CSS would work well on.
• Being a pre-made template elsewhere means you can do just as good of a job creating a site as these major competitors out there.
• It looked like a fun challenge.
• It's something you too can follow along to create with me.

This build is a single page landing page that is for a fictitious movie production company. The goal here is to leverage Tailwind CSS without adding much custom CSS at all. At minimum, I added some custom styles for setting defined heights for a looping video background image and a call to action background image at the bottom of the page.

The designs are nearly identical at first glance but I chose some alternate design decisions based on preference. The source code is pretty self-explanatory so I invite you to jump in and follow along!

====================

📰 Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💎🛤 NEW COURSE: HELLO RAILS - Get notified Https://hellorails.io

💻 Previously published at:

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

☕️ Or buy me a coffee https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=uo3i6HZiVMQ