Playful Pastel UI Kit

28 friendly components in soft pinks, yellows and pastels, with extra-rounded shapes that make any interface feel approachable.

28 components · live preview · copy as HTML or JSX · free for commercial use

Playful buttons

Primary Button

Playful · Buttons

<button class="bg-pink-200 text-pink-900 rounded-3xl px-4 py-2 text-sm font-bold hover:bg-pink-300  transition-all">
  Primary Button
</button>

Outline Button

Playful · Buttons

<button class="bg-transparent text-yellow-800 border-2 border-yellow-200 rounded-3xl px-4 py-2 text-sm font-bold transition-colors">
  Outline Button
</button>

Icon Button

Playful · Buttons

<button class="w-10 h-10 flex items-center justify-center rounded-full bg-yellow-50 border-2 border-yellow-200 text-yellow-800  transition-colors" aria-label="Settings">
  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
</button>

Accent Button

Playful · Buttons

<button class="bg-teal-100 text-teal-800 rounded-full px-5 py-2.5 text-sm font-bold  transition-all">
  Get Started
</button>

Playful badges

Status Pill

Playful · Badges

Active

<span class="inline-flex items-center gap-1.5 bg-teal-100 text-teal-800 rounded-full px-2.5 py-1 text-xs font-bold">
  <span class="w-1.5 h-1.5 rounded-full bg-current opacity-70"></span>
  Active
</span>

Notification Badge

Playful · Badges

🔔 3

<span class="relative inline-flex">
  <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-yellow-50 border-2 border-yellow-200 text-yellow-700">🔔</span>
  <span class="absolute -top-1 -right-1 inline-flex items-center justify-center w-5 h-5 rounded-full bg-teal-100 text-teal-800 text-[10px] font-bold">3</span>
</span>

Playful cards

Basic Card

Playful · Cards

Card Title

A short description of this card's content goes here.

<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-5 ">
  <h3 class="text-sm font-bold text-yellow-800 mb-1">Card Title</h3>
  <p class="text-xs text-yellow-700">A short description of this card's content goes here.</p>
</div>

Profile Card

Playful · Cards

Jane Doe

Product Designer

<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-5  flex items-center gap-4">
  <div class="w-12 h-12 rounded-full bg-yellow-200 border-2 border-yellow-400 flex items-center justify-center text-yellow-800 text-sm font-bold">JD</div>
  <div>
    <p class="text-sm font-bold text-yellow-800">Jane Doe</p>
    <p class="text-xs text-yellow-700">Product Designer</p>
  </div>
</div>

Pricing Card

Playful · Cards

Pro

$19/mo

<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-6 ">
  <p class="text-xs font-bold text-yellow-800 uppercase tracking-wide mb-2">Pro</p>
  <p class="text-2xl font-bold text-yellow-800 mb-4">$19<span class="text-sm text-yellow-700">/mo</span></p>
  <button class="w-full bg-pink-200 text-pink-900 rounded-3xl px-4 py-2 text-sm font-bold hover:bg-pink-300 transition-all">
    Choose Plan
  </button>
</div>

Playful alerts

Info Alert

Playful · Alerts

ℹ️ This is an informational message.

<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-3 text-xs text-yellow-800 ">
  ℹ️ This is an informational message.
</div>

Success Alert

Playful · Alerts

✅ Your changes have been saved.

<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-3 text-xs text-yellow-800 ">
  ✅ Your changes have been saved.
</div>

Warning Alert

Playful · Alerts

⚠️ This action can't be undone.

<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-3 text-xs text-yellow-800 ">
  ⚠️ This action can't be undone.
</div>

Error Alert

Playful · Alerts

⛔ Something went wrong.

<div class="max-w-xs bg-yellow-50 border-2 border-yellow-200 rounded-3xl p-3 text-xs text-yellow-800 ">
  ⛔ Something went wrong.
</div>

Playful forms

Text Input

Playful · Forms

<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-3xl text-sm bg-blue-50 border-2 border-blue-200 text-blue-900 placeholder:text-blue-400 focus:outline-none focus:border-blue-400" />

Textarea

Playful · Forms

<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-3xl text-sm bg-blue-50 border-2 border-blue-200 text-blue-900 placeholder:text-blue-400 focus:outline-none focus:border-blue-400"></textarea>

Select Dropdown

Playful · Forms

<select class="w-48 px-3 py-2 rounded-3xl text-sm bg-blue-50 border-2 border-blue-200 text-blue-900 placeholder:text-blue-400 focus:outline-none focus:border-blue-400">
  <option>United States</option>
  <option>South Korea</option>
  <option>Japan</option>
</select>

Checkbox

Playful · Forms

I agree to the terms

<label class="inline-flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 rounded text-pink-600" />
  <span class="text-sm text-yellow-800">I agree to the terms</span>
</label>

Toggle Switch

Playful · Forms

Uses Tailwind's peer/peer-checked variants — no JavaScript required.

<label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="w-11 h-6 rounded-full bg-slate-200 peer-checked:bg-pink-400 transition-colors relative">
    <div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
  </div>
</label>

Playful feedback

Spinner

Playful · Feedback

<div class="w-8 h-8 rounded-full border-4 border-pink-200 border-t-pink-500 animate-spin"></div>

Progress Bar

Playful · Feedback

<div class="w-48 h-2.5 rounded-full bg-pink-100 overflow-hidden">
  <div class="h-full w-2/3 rounded-full bg-pink-400"></div>
</div>

Skeleton Loader

Playful · Feedback

Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.

<div class="w-48 space-y-2">
  <div class="h-4 w-3/4 rounded bg-pink-100"></div>
  <div class="h-4 w-1/2 rounded bg-pink-100"></div>
</div>

Toast Notification

Playful · Feedback

Vanilla JavaScript — no framework required.

<button id="toast-trigger" class="bg-pink-200 text-pink-900 rounded-3xl px-4 py-2 text-sm font-bold hover:bg-pink-300 transition-all">
  Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-3xl bg-yellow-50 border-2 border-yellow-200 text-yellow-800 text-sm font-bold px-4 py-3 ">
  ✅ Saved successfully!
</div>

Playful overlays

Accordion / FAQ Item

Playful · Overlays

Refund policy? ▾

30-day money-back guarantee, no questions asked.

Uses the native <details>/<summary> elements — no JavaScript required.

<details class="w-48 rounded-3xl border-2 border-yellow-200 bg-yellow-50 p-4 group">
  <summary class="cursor-pointer text-sm font-bold text-yellow-800 list-none flex items-center justify-between">
    Refund policy?
    <span class="text-yellow-700 group-open:rotate-180 transition-transform">▾</span>
  </summary>
  <p class="text-xs text-yellow-700 mt-2">30-day money-back guarantee, no questions asked.</p>
</details>

Modal Dialog

Playful · Overlays

Uses the native <dialog> element — minimal JavaScript just toggles it open/closed.

<button id="modal-open" class="bg-pink-200 text-pink-900 rounded-3xl px-4 py-2 text-sm font-bold hover:bg-pink-300 transition-all">
  Open Modal
</button>
<dialog id="modal" class="rounded-3xl p-6 w-full max-w-xs bg-yellow-50 border-2 border-yellow-200 text-yellow-800 backdrop:bg-black/50">
  <h3 class="text-sm font-bold mb-2">Confirm action</h3>
  <p class="text-xs text-yellow-700 mb-4">Are you sure you want to continue?</p>
  <div class="flex gap-2 justify-end">
    <button id="modal-close" class="px-3 py-1.5 rounded-3xl text-xs font-bold text-yellow-700">Cancel</button>
    <button class="px-3 py-1.5 rounded-3xl text-xs font-bold bg-pink-200 text-pink-900">Confirm</button>
  </div>
</dialog>

Tooltip

Playful · Overlays

Uses Tailwind's group/group-hover variants — no JavaScript required.

<span class="relative inline-block group">
  <button class="w-8 h-8 flex items-center justify-center rounded-full bg-yellow-50 border-2 border-yellow-200 text-yellow-800 text-xs font-bold">?</button>
  <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:block whitespace-nowrap rounded-3xl bg-teal-500 text-white text-[10px] px-2.5 py-1.5">
    Helpful tooltip text
  </span>
</span>

Playful avatars

Circle Avatar

Playful · Avatars

<div class="w-10 h-10 rounded-full bg-yellow-200 border-2 border-yellow-400 flex items-center justify-center text-yellow-800 text-sm font-bold">AB</div>

Avatar Group

Playful · Avatars

<div class="flex -space-x-2">
  <div class="w-9 h-9 rounded-full bg-yellow-200 border-2 border-yellow-400 border-2 border-white flex items-center justify-center text-yellow-800 text-xs font-bold">A</div>
  <div class="w-9 h-9 rounded-full bg-yellow-200 border-2 border-yellow-400 border-2 border-white flex items-center justify-center text-yellow-800 text-xs font-bold">B</div>
  <div class="w-9 h-9 rounded-full bg-yellow-200 border-2 border-yellow-400 border-2 border-white flex items-center justify-center text-yellow-800 text-xs font-bold">C</div>
  <div class="w-9 h-9 rounded-full bg-yellow-50 border-2 border-yellow-200 border-2 border-white flex items-center justify-center text-yellow-700 text-xs font-bold">+5</div>
</div>

Avatar with Status

Playful · Avatars

<div class="relative inline-block">
  <div class="w-10 h-10 rounded-full bg-yellow-200 border-2 border-yellow-400 flex items-center justify-center text-yellow-800 text-sm font-bold">JS</div>
  <span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>

What is the playful style?

Playful design uses soft pastel fills (pink-200, yellow-50), very large corner radii (rounded-3xl), gentle borders and bold, friendly type. Every element looks soft and touchable, which lowers the intimidation factor of an interface and gives it a cheerful personality.

When to use it

It fits consumer apps, kids' and learning platforms, habit trackers, wellness and lifestyle products, and onboarding flows that should feel welcoming. Combine it with illustrations and light-hearted copy for a consistent tone, and use a single accent hue per screen so the pastels feel deliberate rather than random.

Accessibility notes

Pastels are the main risk: light text on light backgrounds fails contrast quickly. Keep text in the deepest shade of each hue (pink-900 on pink-200, as the buttons here do) and give inputs a border strong enough to see. Don't let rounded, colorful shapes hide which elements are interactive — buttons should still look like buttons.

← Back to the full UI Component Library

Frequently Asked Questions

How do I make a cute, playful UI with Tailwind?↓

Use pastel backgrounds such as pink-200 or yellow-50, large radii like rounded-3xl, soft borders, and darker text from the same color family.

Do pastel colors pass accessibility contrast?↓

Pastel backgrounds can, as long as the text is dark — for example pink-900 on pink-200. Light or white text on pastels usually fails.

Is the playful style suitable for business apps?↓

It suits consumer, education and lifestyle products best. For professional tools, the Corporate or Minimal kits are a better fit.

Last updated: November 7, 2026