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.
Download the source code to get access to the final result as well as the assets used in this tutorial. Check out the videos for a complete walk-through of the build. The page is fully responsive and uses just a dash of JavaScript for the mobile menu interactivity.
Part 1
Part 2
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!
The series so far
- How to Install Tailwind CSS v1.0
- Let’s Build: With Tailwind CSS – Tweet
- Let’s Build: With Tailwind CSS – Dribbble Shot
- Lets Build: With Tailwind CSS – Responsive Navbar
The post Let’s Build: With Tailwind CSS – Movie Production Landing Page appeared first on Web-Crunch.
Top comments (0)