Tailwind UI
Ready for Tailwind CSS v3.0
Components
Documentation
Search components
Account
Signed in as
Licensed User
Components
Documentation
Changelog
Support
License
Download Figma Assets
Upgrade to Team License
Account Settings
Sign out
Home Screens
Application UI
Page Examples
Full-width with sidebar
Requires
JS
Preview
Preview
Code
HTML
React
Vue
HTML
React
Vue
s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
Copy code
Copied!
HTML
React
Vue
Card layout with sidebar
Requires
JS
Preview
Preview
Code
HTML
React
Vue
HTML
React
Vue
s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
Copy code
Copied!
HTML
React
Vue
Constrained multi-column
Requires
JS
Preview
Preview
Code
HTML
React
Vue
HTML
React
Vue
s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
Copy code
Copied!
HTML
React
Vue
Constrained grid layout
Requires
JS
Preview
Preview
Code
HTML
React
Vue
HTML
React
Vue
s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
Copy code
Copied!
HTML
React
Vue
With secondary nav and tertiary column
Requires
JS
Preview
Preview
Code
HTML
React
Vue
HTML
React
Vue
s.language===activeSnippet).snippet).then(()=>{copied=true;clearTimeout(copyTimeout);copyTimeout=setTimeout(()=>{copied=false},1500)})">
Copy code
Copied!