Create an animated landing page with Tailwind CSS

In this project we are going to build a beautiful tailwind CSS site. This site again will be created using only HTML and CSS and no framework. This site will also have cool animation effect.

The installation of tailwind is a long process and covered earlier in my earlier post. Please refer it to get tailwind CSS setup in your project.

After the installation, in the index.html file, add the basic code by ! and tab. After that also add the link for the style sheet. We have also added an h1 text, for the testing.

After that, right-click and then click on Open with Live Server link.


Tailwind Site


Now, the code will open in http://127.0.0.1:5500/public/index.html



Tailwind Site


We will create our navigation bar first. So, inside a nav, we will have two divs. One will contain an icon and the other our menu items.

We are again taking the icon svg from the awesome site https://heroicons.dev/. The only thing which we have changed is the class size to w-12 and h-12.

The classes have been taken from the awesome documentation of tailwind site. They means as below.

flex - makes children flex items
justify-between - justify-content: space-between;
items-center - align-items: center;
h-16 - height: 4rem;
px-24 - padding-left: 6rem; padding-right: 6rem;
px-4 - padding-left: 1rem; padding-right: 1rem;
text-xl - font-size: 1.25rem; line-height: 1.75rem;
text-white - text color white
bg-green-600