Creating a Flower Shop Website Using Tailwind UI Kit

Maheen
Maheen
Nov 10, 2020 · 5 min read
Image for post
Image for post
Photo by Lee Campbell on Unsplash

Hey everyone, today I wanted to do something fun and exciting! That got me thinking, why not create a website for a flower store. The word exciting can be relative when it comes to a nerd like me. Yes, creating websites is actually something I find exciting and enjoyable. What’s that? I’m too lame for you! Wish I could disagree with you. But we are who we, right?

Now that we have established that I am in fact a huge nerd. Let’s look at how easily you can create a website for a flower shop using Tailwind UI Kit.

Recap on Tailwind UI Kit

So, how can I start using TUK, you ask? Well, that’s pretty simple actually. All you’ll need to do is acquire a developer’s license to gain access to over 350 web UI application and marketing components.

Image for post
Image for post

Let’s be honest here, who would be interested in throwing money without actually trying out the product, right? At least not me! So, if you are anything like me what you can do is try out the “Community License” first. It gives you access to 25 free components which is great for playing with the different components and deciding if TUK is for you.

Let’s get started

  1. Open your Visual Studio Code (VSC) and create your Html and JavaScript file there. Once you have linked your js file with your Html one and added your head and body tags, you will be ready to start playing with TUK.
Image for post
Image for post

Adding Components

So, let’s look at how you can add the components provided by TUK one by one, shall we?

Hero Section

Image for post
Image for post

Scroll to the marketing components and click on the “Hero” section. This will redirect you to the hero components and you’ll be able to view the different variations of the hero components provided by TUK.

Of course, you have complete freedom to choose the one you like. Click on the “Show Code” option, for the one you like.

Copy your “Html code” and your JavaScript code in their respective files. Taa-daaa! The components have now been successfully added to your website.

You can view the components by clicking on the “Live Server” option in your VSC.

Image for post
Image for post

Time for some changes

Image for post
Image for post

Newsletter Section

Changing the components to fit the needs of your website is my favorite thing about TUK. TUK offers over 350 components, these components can then be edited and changed to different components. So, think about the total number of components at your disposal.

I copied the “Html” code and pasted it in my VSC. I then changed the image, removed the subscribe button, and changed the text to reflect the story of the Flower Shop. That’s it!

Image for post
Image for post

Blog Section

Image for post
Image for post

Contact Section

Image for post
Image for post

I added a newsletter component of my choosing to allow the users to easily subscribe to the email if they wanted. I also changed the image in the newsletter section.

Image for post
Image for post

Footer

Image for post
Image for post

Of course, I changed the color of the background. It would be meaningless to add UIs components if you weren’t able to change the color depending on your needs.

And it’s done

I find Tailwind UI Kit extremely helpful as they allow me to focus on the job at hand without worrying about the technicalities of design. Not to mention, the huge amount of time I save while using it!

Thanks for reading.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Maheen

Written by

Maheen

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

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Maheen

Written by

Maheen

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

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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