UI Generator

Input Parameters

Input Type

Placeholder

Label

Default Value

Required

Width (px)

Height (px)

Border Radius (px)

Border Width (px)

Border Color

Border Style

Background Color

Text Color

Font Size (px)

Padding (px)

Focus Border Color

Focus Background Color

Focus Text Color

Hover Border Color

Hover Background Color

Show Error State

Error Border Color

Error Background Color

Error Text Color

Min Length

Max Length

Pattern Preset

Pattern

Aria Label

Aria Described By

Autofocus

Read Only

Disabled

Has Icon

Has Animation

Preview

Input Label

Output format

Tailwind HTML

1<label class="block text-sm font-medium text-zinc-700 mb-1">Input Label</label>
2<input
3  class="w-[200px] h-[40px] bg-[#ffffff] text-[#000000] text-[16px] rounded-[4px] border-[1px] border-[solid] border-[#cccccc] px-[8px] focus:outline-none focus:border-[#3b82f6] focus:bg-[#ffffff] hover:border-[#999999] hover:bg-[#f9fafb] transition"
4  type="text"
5    placeholder="Enter text here"
6/>