Hello peeps.
Today I am gonna share my another awesome experience with TUK and how Tailwind UI Kit’s 350+ components make it convenient for me to make my site’s landing page in no time. Just have a look at it.
Well, this is the landing page that I created using TUK components and it actually took me just a few hours. Isn’t it look pretty cool? I know it does ;) It's really simple using TUK. Don’t believe me, just try it out yourself. Here is the link to it. https://tailwinduikit.com
So, here’s how you do it:.
- The first thing you’re gonna wanna do is decide whether you’re going to use TUK’s CDN to make your landing page or use a starter kit. In my opinion, the CDN is the better option if you’re opting for integrating the components in your pre-existing project and the starter kit is the preferred choice if you intend to make your landing page (or any other page) from scratch. So, let’s go with the latter.
- Follow the instructions on TUK’s website on how to use a starter kit with a bundler like Rollup or Parcel.
- Go to the page section and pick out the components that you like.
- Copy their code and paste it in the index.js file.
- Your landing page’s all ready to be deployed now.
Let’s discuss all of those points in detail, but before that, let’s consider why Tailwind UI Kit instead of any of its competitors? Here’s why: Say you are in the middle of a project and need a table for displaying products, TUK’s your best option. If you want to show data in a card format, TUK has a component ready for that. Need alerts for your application? TUK’s got your back. Do you want a page with inputs and tabs for settings? TUK components provide that too.
So, if you want to use a starter kit, there’s a very detailed guide here (insert a hyperlink to starter kit article here) that you can use to get started.
Now that you’ve done that, let’s get into the nitty-gritty of it, although, to be really honest with you, there isn’t much to do.
A standard landing page has the following:
· Hero
· Logo Cloud
· Features
· CTA
· Testimonials
· Blog Posts
· Subscribe/Newsletter
· Footer
So now let’s make a landing page with TUK.
- First things first, go to /src/components/ and open up the index.js file with your IDE of choice. I’m using Visual Studio Code. Of course, the best practice is to open up the entire folder in VS Code, but you already know that.
2. Then go to the components section on the Explore page. You’ll be able to see all the page sections and components there.
3. The first thing we need is Hero. Scroll down to Marketing and go to Hero. Pick one that you like and copy its HTML code. There are 5 components for that page section.
4. Now, remove the boilerplate sample code already present in the index.js file and paste our hero’s code there.
You copy the Vanilla JS code.
You paste it in the index.js file.
5. If you’ve followed the starter kit article, you already have localhost running. Go see the hero on your browser running the localhost.
6. Now we repeat that with everything.
7. Go to Cloud Logo and pick one that you like. There are 3 components for that section.
8. Copy that and paste it under the Hero div in the index.js file. Make sure that you don’t mess around with the ` bracketing the code.
9. Then we do the same thing for CTA, which has 3 components ready.
10. Testimonials come after that. All you’ve gotta do is copy the HTML and paste it in the index.js file one by one. Testimonials have 5 components.
11. After that, we have the Blog Posts, of which there are 5 components on TUK as well.
12. The Newsletter/Subscribe section comes after that. It, too, has 5 components that you can choose from.
13. Lastly, the Footer. Again, you can choose from the 5 that you like.
In this way, I created the landing page using TUK. If you have not tried it yet, just click on the link: https://tailwinduikit.com and create your designs in your own unique way. Since it’s all Tailwind, it’s really simple how to make changes.
I hope that helped you out. Thanks for reading.
