Notifications
Edward Norton
03:20 PM
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
Denzel Washington
06:05 AM
Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20
Morgan Freeman
01:10 PM
There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomi
Keira Knightley
01:10 PM
Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20
Russell Crowe
01:10 PM
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
Regular Form
Input
Show code
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagInput TextHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2"placeholder="Input text"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagRoundedHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full rounded-full border mt-2"placeholder="Rounded"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagWith HelpHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2"placeholder="With help"HTMLCloseTag HTMLOpenTagdiv class="text-xs text-gray-600 mt-2"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="password"class="input w-full border mt-2"placeholder="Password"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagDisabledHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2 bg-gray-100 cursor-not-allowed"placeholder="Disabled"disabledHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Input Sizing
Show code
HTMLOpenTaginput type="text"class="input input--sm w-full border"placeholder="Input small"HTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border mt-2"placeholder="Input normal"HTMLCloseTag HTMLOpenTaginput type="text"class="input input--lg w-full border mt-2"placeholder="Input large"HTMLCloseTag Input Groups
Show code
@
.00
@
.00
HTMLOpenTagdiv class="relative"HTMLCloseTag HTMLOpenTagdiv class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text"class="input pl-12 w-full border col-span-4"placeholder="Email"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="relative mt-2"HTMLCloseTag HTMLOpenTaginput type="text"class="input pr-12 w-full border col-span-4"placeholder="Price"HTMLCloseTag HTMLOpenTagdiv class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"HTMLCloseTag.00HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="relative mt-2"HTMLCloseTag HTMLOpenTagdiv class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text"class="input px-12 w-full border col-span-4"placeholder="Price"HTMLCloseTag HTMLOpenTagdiv class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"HTMLCloseTag.00HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Input State
Show code
Strong password
Attempting to reconnect to server...
This field is required
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagInput SuccessHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border border-theme-9 mt-2"placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv class="w-full grid grid-cols-12 gap-4 h-1 mt-3"HTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-theme-9"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-theme-9"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-theme-9"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="col-span-3 h-full rounded bg-gray-200"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-theme-9 mt-2"HTMLCloseTagStrong passwordHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagInput WarningHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border border-theme-12 mt-2"placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv class="text-theme-12 mt-2"HTMLCloseTagAttempting to reconnect to server...HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagInput ErrorHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border border-theme-6 mt-2"placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv class="text-theme-6 mt-2"HTMLCloseTagThis field is requiredHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Select Options
Show code
HTMLOpenTagdiv class="flex flex-col sm:flex-row items-center"HTMLCloseTag HTMLOpenTagdiv class="sm:mt-2"HTMLCloseTag HTMLOpenTagselect class="input input--sm border mr-2"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagselect class="input border mr-2"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagselect class="input input--lg border mr-2"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Vertical Form
Show code
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagEmailHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="email"class="input w-full border mt-2"placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="password"class="input w-full border mt-2"placeholder="secret"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mt-5"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input border mr-2"id="vertical-remember-me"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="vertical-remember-me"HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagbutton type="button"class="button bg-theme-1 text-white mt-5"HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag Horizontal Form
Show code
HTMLOpenTagdiv class="flex flex-col sm:flex-row items-center"HTMLCloseTag HTMLOpenTaglabel class="w-full sm:w-20 sm:text-right sm:mr-5"HTMLCloseTagEmailHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="email"class="input w-full border mt-2 flex-1"placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex flex-col sm:flex-row items-center mt-3"HTMLCloseTag HTMLOpenTaglabel class="w-full sm:w-20 sm:text-right sm:mr-5"HTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput type="password"class="input w-full border mt-2 flex-1"placeholder="secret"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mt-5 sm:ml-20 sm:pl-5"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input border mr-2"id="horizontal-remember-me"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="horizontal-remember-me"HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="sm:ml-20 sm:pl-5 mt-5"HTMLCloseTag HTMLOpenTagbutton type="button"class="button bg-theme-1 text-white"HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Inline Form
Show code
HTMLOpenTagdiv class="grid grid-cols-12 gap-2"HTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border col-span-4"placeholder="Input inline 1"HTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border col-span-4"placeholder="Input inline 2"HTMLCloseTag HTMLOpenTaginput type="text"class="input w-full border col-span-4"placeholder="Input inline 3"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag Checkbox & Switch
Show code
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagVertical CheckboxHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mt-2"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input border mr-2"id="vertical-checkbox-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="vertical-checkbox-chris-evans"HTMLCloseTagChris evansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mt-2"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input border mr-2"id="vertical-checkbox-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="vertical-checkbox-liam-neeson"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mt-2"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input border mr-2"id="vertical-checkbox-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="vertical-checkbox-daniel-craig"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagHorizontal CheckboxHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="flex flex-col sm:flex-row mt-2"HTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input border mr-2"id="horizontal-checkbox-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="horizontal-checkbox-chris-evans"HTMLCloseTagChris evansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input border mr-2"id="horizontal-checkbox-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="horizontal-checkbox-liam-neeson"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input border mr-2"id="horizontal-checkbox-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="horizontal-checkbox-daniel-craig"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagSwitchHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTaginput type="checkbox"class="input input--switch border"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag Radio
Show code
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagVertical Radio ButtonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mt-2"HTMLCloseTag HTMLOpenTaginput type="radio"class="input border mr-2"id="vertical-radio-chris-evans"name="vertical_radio_button"value="vertical-radio-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="vertical-radio-chris-evans"HTMLCloseTagChris evansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mt-2"HTMLCloseTag HTMLOpenTaginput type="radio"class="input border mr-2"id="vertical-radio-liam-neeson"name="vertical_radio_button"value="vertical-radio-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="vertical-radio-liam-neeson"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mt-2"HTMLCloseTag HTMLOpenTaginput type="radio"class="input border mr-2"id="vertical-radio-daniel-craig"name="vertical_radio_button"value="vertical-radio-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="vertical-radio-daniel-craig"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagHorizontal Radio ButtonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="flex flex-col sm:flex-row mt-2"HTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2"HTMLCloseTag HTMLOpenTaginput type="radio"class="input border mr-2"id="horizontal-radio-chris-evans"name="horizontal_radio_button"value="horizontal-radio-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="horizontal-radio-chris-evans"HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput type="radio"class="input border mr-2"id="horizontal-radio-liam-neeson"name="horizontal_radio_button"value="horizontal-radio-liam-neeson"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="horizontal-radio-liam-neeson"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTaginput type="radio"class="input border mr-2"id="horizontal-radio-daniel-craig"name="horizontal_radio_button"value="horizontal-radio-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="cursor-pointer select-none"for="horizontal-radio-daniel-craig"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag