This demo showcases a complete design system built with Tailwind CSS using the
<template>
approach.
Explore different component categories using the navigation above:
Consistent colors, spacing, and typography scales defined in tailwind.config.js
All components follow WCAG guidelines with proper ARIA attributes
Classes:
.btn-primary: px-6 py-3 bg-primary-500 text-white rounded-lg hover:bg-primary-600 disabled:opacity-50
Classes:
.btn-secondary: px-6 py-3 border-2 border-primary-500 text-primary-600 rounded-lg hover:bg-primary-50
This is a basic card component with header, body, and footer sections.
This card has hover effects for better interactivity.
A modern portfolio website built with Tailwind CSS and vanilla JavaScript.
✓ Looks good!
✗ This field is required
primary-50
primary-500
primary-900
surface-light
surface-dark
text-xs
The quick brown fox jumps over the lazy dog
text-sm
The quick brown fox jumps over the lazy dog
text-base
The quick brown fox jumps over the lazy dog
text-lg
The quick brown fox jumps over the lazy dog
text-xl
The quick brown fox jumps over the lazy dog
text-2xl
The quick brown fox jumps over the lazy dog