- Tailwind Css Landing Page Examples
- Tailwind Css Landing Page Free
- Tailwind Css Theme
- Tailwind Css Landing Page Download
- Tailwind Css Tutorial
- Tailwind Css Icons
Beautiful, designed landing page for your SaaS. It comes in a dark and light version. The landing page is made with Tailwind CSS and optimized for mobile, tablet and desktop use. Icons included in these designs are from the awesome heroicons library.
Build with Tailwind CSS version 2.x
Tailwind CSS v2.0 - Fully responsive layout - Retina ready - Cross-browser tested - Fully customizable - Meets WCAG accessibility guidelines. Product Description: Product landing page is intended to market any service or product. Amazing patterns, as well as an elegant design architecture, will ensure a pleasing experience for the targeted. Tailwind CSS is different from frameworks like Bootstrap, Foundation, or Bulma because it is not a UI kit, and it does not have default themes or built-in UI components. It is a very powerful framework in terms of customization, of course, if you don’t mind the repetition in your markup, because.
SaaS Landing Page for Tailwind CSS. Product Update Template for Tailwind CSS. Footer pack for Tailwind CSS.
Please take a look at our licenses page to see how you can use our Tailwind CSS landing page for your next project.
Pay what you wantDownloadPreview
When I started learning how to use the Tailwind CSS library, I really didn’t know what to expect and wasn’t quite sure how I’d fare with the library. It turns out, TailWind’s a whole lot easier to use than I thought and makes designing a landing page a breeze.
One remarkable feature I noticed was the ease with which I could define classes for various responsive breakpoints without writing a single line of CSS media queries. That for me was awesome!
For this tutorial, I’ll assume you have a Tailwind project set up, if you don’t you can grab one here. For the fonts, I’m using Poppins. All the code presented here should be placed in your body tag.
We’ll start off with creating and styling the main element that would house the hero section:
The Tailwind classes added to the main element does the following:
- h-full: Give the main element a height of 100%. Pretty much like what you’d do with a style declaration of height: 100vh in CSS.
- flex: Make the main element a flexbox, just like you would with a style declaration like display: flex in CSS.
- items-center: Position the contents of the main element in the center of the main element, just like you would with align-items: center in CSS.
- px-6 lg:px-32: Assign horizontal padding of 1.5rem to all devices from mobile to medium and horizontal padding of 8rem for devices from large to devices beyond. You can add as many other breakpoints to suit your design needs, this is the wonderful thing about Tailwind.
- bg-purple-900: Gives the main element a purple background with an opacity of 90%. This is equivalent to background-color: purple in CSS.
- text-white: Gives the main section and its child elements a default white color (#FFFFFF).
You should have a clear purple screen that fills your screen completely like this:
Now we’re ready to add a new section to house our hero content. This is important because we want this to be centered in the middle of the main element or screen.
Just like before:
- w-full gives thesection width of 100% for mobile phones to small devices like (Tablets).
- md:w-9/12 gives the sectionwidth of 75% (i.e. 9/12) for medium devices to large.
- xl:w-8/12 gives the section width of 66.6% (8/12) for extra-large devices and above.
For the section width, you can choose to style it whatever way you want. It’s really up to you.
Next, we pass in a hero text like so:
For the Hero Classes:
- text-3xl gives our h1 text a font-size of 1.875rem for mobile phones to medium devices.
- lg:text-5xl gives our h1 text a font-size of 3rem for large devices and above.
- font-bold gives our h1 text a font-weight of 700 (which is the default for bold in CSS).
- text-pink-500 gives it a pink color with an opacity of 50%.
Tailwind Css Landing Page Examples
This should give you the following screen below:
Next, we add a bit of text above and below our hero text like so:
For the Span class above the Hero text:
- font-bold gives our span text a font-weight of 700.
- uppercase renders our span text all in cap locks.
- tracking-widest spaces out the letters within our span, this is exactly what letter-spacing does for us in CSS.
For the Paragraph class below the Hero text:
- font-bold gives our paragraph text a font-weight of 700.
- mb-1 gives our paragraph a margin-bottom of 0.25rem.
This should give you the following screen below:
Moving on, we’ll add a fixed header and footer for the remaining parts.
We’ll start with the footer like so:
Notice that we have added classes for the main element and the footer.
For the Footer Classes:
- absolute positions your footer absolutely relative to the parent container(which in this case is the main element). This is the same thing as position: absolute in CSS.
- right-0 positions your footer absolutely to the right relative to the parent container. This is the same thing as right: 0 in CSS.
- bottom-0 positions your footer absolutely to the bottom relative to the parent container. This is the same thing as bottom: 0 in CSS.
- p-6 lg:p-32: Assigns horizontal and vertical padding of 1.5rem to footer on all devices from mobile to medium and horizontal and vertical padding of 8rem for devices from large devices and beyond.
For the Main Element, we have only added one extra class called relative. This helps position child elements with absolute styling correctly.
You should now have the following screen shown below:
Next, we add our fixed header like so with a logo:
We have added pretty much the same classes for the header as we did for the footer with exception of the w-full, left-0 and top-0 classes (I’m guessing by now you already know what those mean, so I’ll just move along).
Next, we’ll add a flexbox within our header and add a logo and navigation right inside of our flexbox.
For our flexbox and logo, we have:
Two important classes we have added here are:
- flex: This turns our box into a flexbox so we can position columns and rows easily.
- justify-between: This equalizes the width of each column within a flex box.
With that in place, your screen should look like this now:
Finally, we add in our navigation like so:
Wow! That was a handful of code right there. We’ll get to the styling in a bit, but before we do that, let’s take a look at our landing page so far.
At this stage, your landing page should look similar to this:
Now for the navigation styling, let’s break it down so we understand it was styled.
Tailwind Css Landing Page Free
To do this, I’ll pick just one list item tag and explain the classes. The rest is just repeated code.
For the List Item classes:
- ml-24: Gives the list-item tags a margin-left of 6rem each.
- justify-end: Pushes both box elements (div and h1) to the extreme right of the list-item tag.
- border-b: Establishes a border-bottom of 1px for the div in question.
- border-solid: Establishes a solid border for the div in question.
- border-white: Establishes a white color for the div’s border.
- w-10: Establishes a width of 2.5rem
- ml-3: Establishes a margin-left of 0.75em for the h1 tag bearing the numbers.
- text-right: Skews text to the right for the under-listed text in each list item tag.
Tailwind Css Theme
And finally, you can add a vector or PNG background that is transparent to make your landing page a little bit more interesting like so:
Tailwind Css Landing Page Download
And there you have it, a complete landing page using Tailwind CSS.
Note that for this exercise, we haven’t written one single line of CSS or media queries for styling any element or for establishing styles for responsive breakpoints (this is the real power and elegance of TailWind CSS and why it trumps a lot of CSS frameworks out there, including Bootstrap).
There’s a lot I haven’t mentioned here that Tailwind offers like defining your own custom configuration using the Tailwind.config.js file and using @apply directives to assign multiple styles as you’d have done in normal CSS. If you want to know more about it, you can check it out at tailwindcss.com.
Tailwind Css Tutorial
From my own experience, it's really fun and easy to use and once you start working with it you may never want to use any other framework again. It’s that good!
Tailwind Css Icons
Alright, guys, you’re welcome try it out and let me know what you think.