A bunch of tailwind snippets for common UI like button, input, dropdown, checkbox, ...etc
| Prefix | Code |
|---|---|
tw-button |
Display simple Button component |
tw-button-ghost |
Display simple Button ghost |
tw-button-outline |
Display simple Button outline |
tw-button-icon |
Display simple Button with Icon |
tw-input |
Display simple Input component |
tw-input-v2 |
Display simple Input v2 |
tw-input-v3 |
Display simple Input v3 |
tw-input-search |
Display simple Input with Icon search |
tw-input-search-clear |
Display simple Input Search with clear action |
tw-overlay |
Display simple overlay |
tw-tab |
Display simple Tab component |
tw-tab-v2 |
Display simple Tab v2 |
tw-tab-v3 |
Display simple Tab v3 |
tw-loading-circle |
Display simple Loading circle animation |
tw-form-group |
Display simple form group Label and Input |
tw-textarea |
Display simple Textarea component |
tw-checkbox |
Display simple checked Checkbox |
tw-radio |
Display simple checked Radio |
tw-toggle |
Display simple Toggle |
tw-dropdown |
Display simple Dropdown |
tw-rounded-icon |
Display simple rounded icon |
tw-five-stars |
Display 5 stars rating |
tw-modal |
Display Modal UI component |
tw-modal-close |
Display circle close button |
tw-upload |
Display custom upload file UI |
tw-pagi-v1 |
Display pagination |
tw-button-combination |
Display two button combination |
tw-multi-avatar |
Display multi avatar side by side |
tw-featured-list |
Display common featured list item UI |
tw-notification |
Display simple notification UI |
tw-counter |
Display simple counter UI |
tw-counter-v2 |
Display simple counter UI v2 |
tw-skeleton |
Display skeleton loading |
tw-button-loading |
Display button with circle loading animation |
tw-button-rounded |
Display button rounded |
tw-password-toggle |
Display input password with toggle icon |
tw-link-image |
Display link wrap image tag |
tw-signup-form |
Display signup form |
tw-simple-formv1 |
Display simple form v1 input and button |
tw-simple-formv2 |
Display simple form v2 input and button |
tw-grid-equals |
Display grid layout equals |
tw-grid-scroll-snap |
Display grid layout with snap scroll on mobile |
tw-send-mail-v1 |
Display simple form send mail |
tw-send-mail-v2 |
Display simple form send mail |
tw-card-overlay-vx |
Display Card overlay ui with 3 version x: 1,2,3, ex: tw-card-overlay-v1 |
tw-card-vx |
Display Card ui with 3 version x: 1,2,3, ex: tw-card-v1 |
tw-card-horizontal |
Display Card horizontal |
Enjoy!