July 1, 2019
Let's Build: With Tailwind CSS - Movie 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.
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](https://web-crunch.com/lets-build-tailwind-css-dribbble-shot
- Lets Build: With Tailwind CSS - Responsive Navbar