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.
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!
- 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.