Workit landing page

A fully-responsive mock landing page using fluid type and spacing, featuring Utopia.


  • Fluid type and space thanks to Utopia

  • Responsive design that looks good on desktop, tablet, and mobile with only 2 media queries

  • CUBE CSS with Tailwind and design tokens

Built with

  • Eleventy

  • Tailwind


  • Semantic HTML5 markup

  • CSS custom properties

  • Flexbox

  • Mobile-first workflow

Why I built this

I have been taking challenges on Frontend Mentor to get better at translating design mockups into code.

I also wanted to try working with Tailwind in a project, and this design seemed like a good fit.

Why I avoided Tailwind in the past

One concept that stuck to me early on while learning how to code is the separation of concerns. In the context of web development, this means that HTML is responsible for content and giving it structure, while CSS is responsible for styling and layout concerns. In other words, HTML is the skeleton, while CSS is the skin.

So when I first encountered Tailwind and its infamous tagline “Best practices” don’t actually work, I was convinced it wasn’t for me.

But later on I realized that separation of concerns is more than just keeping CSS out of HTML. In fact, Adam Wathan, the creator of Tailwind CSS, makes a lot of good points in his his article CSS Utility Classes and “Separation of Concerns”. I think a huge misconception about Tailwind is that you’re just supposed to plug it in your project and you never have to make a CSS file, just litter your HTML with classes. But that is a utility-only approach, not utility-first which is how Tailwind was intended to be used.

When I stumbled upon Andy Bell’s Build Excellent Websites, which mentions and uses Tailwind, that’s when I decided to give it a try. And I realized, hey, this isn’t so bad!

Project notes

I used Tailwind quite conservatively in conjunction with CUBE CSS, which means I still wrote component-based classes instead of taking a utility-first approach. But I definitely see the benefit of using Tailwind, especially for rapid UI development during the early phases of a project. I especially like how it can process design tokens and convert them into CSS custom properties that I can use in my code.

The source code of Build Excellent Websites is my primary inspiration for this project. I tried my best to practice the principles in that site, which is why I only used 2 media queries for this solution (not counting the ones in resets and config files). The rest of the layout are handled by utility classes, such as the Switcher a.k.a. the Flexbox Holy Albatross by Heydon Pickering.

I also gained more confidence working with SVG:

  • For the logos, I used inline SVG in the header and footer instead of <img> tags.
  • I combined the social media icons into an icon sprite embedded in the page, which avoids extra HTTP requests.

Want to team up?

I’m currently looking for a full-time front-end developer role in a junior level position! I’m also open to other opportunities as well, so feel free to get in touch via LinkedIn or email.