Glassmorphism Test

Wed, 08 Oct 2025 00:00:00 +0000

I was curious about how the latest UI trend, Glassmorphism, is implemented, so I experimented with creating it using only TailwindCSS.

Instead of writing separate CSS code, I combined TailwindCSS utility classes such as backdrop-filter and blur, observing the visual changes in real time. By slightly adjusting the transparency and border thickness, I explored how to achieve the most natural glass-like depth that seems to float above the background.

I also added a simple hover animation to test how the design would feel when interactivity is introduced. Through this small experiment, I once again confirmed that even complex-looking UI designs can be built quickly and intuitively using only utility-based approaches.

Dashboard Card

Fri, 03 Oct 2025 00:00:00 +0000

When building dashboards that present data at a glance, I believe the most essential element is the “card” component. So I conducted a small experiment to create a clean, versatile card UI that fits well in any context.

Since simple borders alone couldn’t convey enough depth, I explored how to combine Tailwind’s shadow and ring utilities to achieve the cleanest, most balanced look. I also experimented with subtle hover effects—where the shadow and border color shift softly—to give users a sense of focus and interactivity.

Inside each card, I adjusted font size and weight to make the key metric stand out clearly, seeking the optimal visual hierarchy. Through this experiment, I was able to explore the small UI design details that naturally guide the user’s attention and improve data readability.

UI | 김미소의 포트폴리오

Glassmorphism Test

Dashboard Card