How To Create A Logo With HTML And TailwindCSS

Hint: If you want to see the HTML and CSS (resp. TailwindCSS) of each step taken, simply right click on the page and select page source or inspect.

The background

At first, we need to create the container in which the logo lives. As the whole blog is styled using TailwindCSS, the logo too will be styled with Tailwind classes.

The logo should have some slightly rounded corners, so let’s add them.

Now we have to decide on a background. It should look nice on both dark and light mode. For a beginning, let’s stay simple and use a white background.

The text

Now we have to continue with the text. As flo’s blog consists of two words with four letters each, it is easy to format.

Wow, that looks bad! So let’s see what we have to change so that it looks presentable.

Okay, now it looks definitely better, but there are still some tweaks to do.

As I’m a lazy person and do not like to screenshot my logos and remove the background afterwards, I (together with my fellow AI) have created a tiny React component which does the job for me. If you’re interested in a tutorial, go over to this post and see for yourself!

Download logo as PNG

So, after some tweaking regarding the padding and inserting the left colored border, I quite like it for the moment. Maybe I’ll change it in the future, let’s see, I’ll definitely keep you updated!

A simplified logo

As the logo will get very tiny if used e.g as a favicon, I will also create a simplified version. For this, I only use the initials.

So let’s go back to the drawing board (aka VS Code).

Okay, that’s it with my logo design post. If you like it, please let me know :)

Download logo as PNG