Creating a responsive landing page for an event planning website using Tailwind UI Kit

Image for post
Image for post
Photo by Scott Graham on Unsplash

Hey everyone! Let’s start the day by creating something fun, why don’t we? Sound good? So, a little background before diving into the article today. I have been using Tailwind UI Kit (TUK) to create all sorts of landing pages and not to sound dorky but I’ve been having a lot of fun with it.

So, today I wanted to share how easy it is to create a responsive landing page for an event planning website using TUK.

A little bit of backstory

I feel like I should talk a little bit about why TUK is the way to go! It’s fairly simple really, it provides over 350 web UI components and 10 templates, and this makes the job of designers and developers extraordinary easily.

Image for post
Image for post

On top of that, ALL the components and templates provided by TUK are accessible. What this means is, that TUK is all about inclusive design. As a developer, this really speaks to me, I want to create websites that cater to the needs of every user. That’s not too dorky, right?

Develop Away

Any-hoo, let’s jump into the world of development and let’s look at how you can create a landing page using TUK.

Creating Html and JS files

So, the first thing you are gonna wanna do is create your Html and Javascript file. You can easily do that in your Visual Studio Code.

Image for post
Image for post

Adding the Hero component

Next, let’s move towards adding the components to our landing page. All you’ll need to do is visit the TUK website and go to the marketing section. Click on the Hero component.

This will display the variations for the hero component offered by TUK. You can select the one you prefer. Click on the Show Code option on the right corner, this will display the Html and JavaScript code for the component.

Image for post
Image for post

Now, all you’ll need to do is copy the Html and Js code in their respective files in VSC. That’s it! We are good to go! You will be able to view the added component by clicking on the Open with Live Server option. Easy peasy lemon squeezy, right?

We can now start making changes to our code. Change the logo by changing the SVG. Replace the logo according to the website. You’ll also need to change the items in your navigation bar according to your website. Add your business description in the heading and lastly, change the image in your hero component.

Image for post
Image for post

Features for the landing page

Now, that we are done with the hero section, we’ll add the features section. Again, all you’ll need to do is copy and paste the Html code from TUK. To change the features, edit the paragraph tag.

Image for post
Image for post

Tell your Story

After that, I added the Newsletter component to add a story about the event planning company. What I did was, changed the heading and added a description of the event planning company. Of course, I removed the subscribe button. Something as simple as removing the button completely changed the look for the entire component, it went from being a newsletter component to being a section that talked about the business.

Image for post
Image for post

Services Offered

So, to add the events covered by the Event Planning Company, I used the blog section. I changed the pictures along with the text description.

Image for post
Image for post

Call-to-Action

I added the call-to-action (CTA) component twice. In the first one, I talked about planning the events, and how to get started.

Image for post
Image for post

The second CTA was to talk about how easily the users can manage their budget while using the event planning website.

Image for post
Image for post

Of course, I changed the images and the text according to my website.

Subscribe Away

The landing page of an event planning should have a newsletter section to make the users subscribe to the website. All you’ll need to do is change the image and the text in their respective tags.

Image for post
Image for post

Footer

Now, just add a footer from the marketing components and make changes to the paragraph tag. I know you can make simple changes like this in your sleep. Well, I wouldn’t recommend it but you get the idea.

Image for post
Image for post

Changing Colors

Change the colors for all the buttons and the icons by searching indigo in the Visual Studio Code. Just replace it with a color you prefer and you are good to go.

Image for post
Image for post

What’s the Takeaway

I started using UI Kits a while back and I have to say. I haven’t found any of the UI Kits out there as helpful as I found Tailwind UI Kit.

You should explore what TUK is offering and check if the UI Kit works for you or not! And maybe let me know what you think! That’s it! Have fun developing. Here is a link to it: https://tailwinduikit.com

Believe in turning dreams into vision and vision into reality. A devRel, coding girl, and a strong supporter of messy hair and sweatpants.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store