🆕 New Year – Beautiful Code #63

I hope you had a great end and start to the year, and that 2026 turns out to be your year! I’ve been offline for a few days spending time with my family, and today I’m officially back to work.

Author

Marc Taulé
January 8th, 2026

Hey! It’s Marc 👋

If you're new here, let me quickly explain what Beautiful Code is all about. 👇

What can I expect from Beautiful Code?
Every week, you'll receive:
😍 3 awesome websites for inspiration
🔨 3 tools and resources that can help grow your products
🤖 3 code snippets ready to be used in your projects
😂 1 meme to add a bit of humor to our world

Happy New Year!
I hope you had a great end and start to the year, and that 2026 turns out to be your year!

I’ve been offline for a few days spending time with my family, and today I’m officially back to work.
That said, I did use this time to finish the new version of JSON Fields, and I’ll be releasing it over the next few weeks, stay tuned!

For now, I want to show you how part of the homepage is shaping up, with all the info, features, pricing, FAQs, and more. I can’t wait to publish it and have you try it out and share your feedback 😁

That’s all I wanted to share for now.
Hope you have a great week!

Before you continue I want to remind you that you can support Beautiful Code buying me a coffee ☕️ I love good coffee! 😍

😍 Websites

1. Max Mara - Untamed Heroine

2. Inversa

3. Paris by Emily

🔨 Tools & Resources

1. Tailframes

Tailframes is a Tailwind CSS UI kit offering a rich collection of ready-to-use, responsive components for building beautiful web interfaces fast. With pre-built elements like buttons, navigation, forms and modals — compatible with HTML and React — it lets developers prototype and ship polished UI without reinventing common layouts.

2. Quicktype

Quicktype automatically generates typed models and serializers from JSON, GraphQL or schema definitions into strongly-typed code for dozens of languages (TypeScript, C#, Python, Go, Swift and more). It saves developers time and reduces bugs by turning dynamic data into safe, autocompletion-friendly code you can drop straight into your project.

3. Agents.md

AGENTS.md is an open, Markdown-based format that acts like a “README for AI coding agents,” guiding them through project setup, build steps, tests and conventions. Used by a growing number of open-source projects, it gives AI assistants clear, structured instructions so they can work more effectively without cluttering human-focused docs.

👉 Check it out

🤖 Code and snippets

Here you will find code snippets from CodePen that you can use in your projects and adapt to your needs.

1. Text frame border animation rotation

2. Jelly Squish Button

Author: Voicu Apostol

3. Colourful Flower Popup Menu

😂 Humor

When you build web with vibe coding 🐟

I hope you enjoy it, and if you like it and want to support me, you can:

  • You can support me by buying me a coffee ☕️

  • Forward it to a friend and invite them to subscribe

  • Share it on your social networks

Or if you just want to say hello, reply to this email or write me on Twitter/X and let's talk!

That's all for today. I hope you enjoyed the content, and see you next week! 👋

Cheers!
Marc