Midone - Tailwind Admin Dashboard Template

Regular Form

Input

Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            
                HTMLOpenTagdivHTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Input Text
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="regular-form-1" type="text" placeholder="Input text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Rounded
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="regular-form-2" type="text" placeholder="Rounded" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 rounded-full"
/HTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    With Help
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="regular-form-3" type="text" placeholder="With help" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    class="text-xs text-slate-500 mt-2"
HTMLCloseTag
    Lorem Ipsum is simply dummy text of the printing and
                                    typesetting industry.
HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-4" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Password
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="regular-form-4" type="password" placeholder="Password" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="regular-form-5" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Disabled
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="regular-form-5" type="text" placeholder="Disabled" disabled="disabled" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag

Input Sizing 

            
                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label=".form-control-lg example" placeholder=".form-control-lg" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 text-lg py-1.5 px-4"
/HTMLCloseTag
                            HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="default input example" placeholder="Default input" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 mt-2 mt-2"
/HTMLCloseTag
                            HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label=".form-control-sm example" placeholder=".form-control-sm" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 text-xs py-1.5 px-2 mt-2 mt-2"
/HTMLCloseTag

Input Groups

@
.00
@
.00 
            
                HTMLOpenTagdiv
    data-tw-merge
    inputGroup="inputGroup" class="flex group input-group"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    id="input-group-email" class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r"
HTMLCloseTag
    @
HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="Email" aria-describedby="input-group-email" placeholder="Email" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv
    data-tw-merge
    inputGroup="inputGroup" class="flex group input-group mt-2"
HTMLCloseTag
    HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="Price" aria-describedby="input-group-price" placeholder="Price" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    id="input-group-price" class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r"
HTMLCloseTag
    .00
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv
    data-tw-merge
    inputGroup="inputGroup" class="flex group input-group mt-2"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r"
HTMLCloseTag
    @
HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="Amount (to the nearest dollar)" placeholder="Price" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    class="py-2 px-3 bg-slate-100 border shadow-sm border-slate-200 text-slate-600 dark:bg-darkmode-900/20 dark:border-darkmode-900/20 dark:text-slate-400 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r"
HTMLCloseTag
    .00
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag

Input State

Strong password
Attempting to reconnect to server...
This field is required 
            
                HTMLOpenTagdivHTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="input-state-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Input Success
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="input-state-1" type="text" placeholder="Input text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-success border-success"
/HTMLCloseTag
                                HTMLOpenTagdiv class="mt-3 grid h-1 w-full grid-cols-12 gap-4"HTMLCloseTag
                                    HTMLOpenTagdiv class="col-span-3 h-full rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="col-span-3 h-full rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="col-span-3 h-full rounded bg-success"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="col-span-3 h-full rounded bg-slate-100 dark:bg-darkmode-800"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv class="mt-2 text-success"HTMLCloseTagStrong passwordHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="input-state-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Input Warning
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="input-state-2" type="text" placeholder="Input text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-warning border-warning"
/HTMLCloseTag
                                HTMLOpenTagdiv class="mt-2 text-warning"HTMLCloseTag
                                    Attempting to reconnect to server...
                                HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="input-state-3" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Input Error
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="input-state-3" type="text" placeholder="Input text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 border-danger border-danger"
/HTMLCloseTag
                                HTMLOpenTagdiv class="mt-2 text-danger"HTMLCloseTag
                                    This field is required
                                HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag

Select Options 

            
                HTMLOpenTagdiv class="flex flex-col items-center sm:flex-row"HTMLCloseTag
                                HTMLOpenTagselect
    data-tw-merge
    aria-label=".form-select-lg example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 text-lg py-1.5 pl-4 pr-8 sm:mr-2 sm:mt-2 sm:mr-2 sm:mt-2"
HTMLCloseTag
    HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                HTMLOpenTagselect
    data-tw-merge
    aria-label="Default select example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 mt-2 sm:mr-2 mt-2 sm:mr-2"
HTMLCloseTag
    HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                                HTMLOpenTagselect
    data-tw-merge
    aria-label=".form-select-sm example" class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md py-2 px-3 pr-8 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 group-[.form-inline]:flex-1 text-xs py-1.5 pl-2 pr-8 mt-2 mt-2"
HTMLCloseTag
    HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag
                                    HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag
HTMLOpenTag/selectHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag

Vertical Form 

            
                HTMLOpenTagdivHTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="vertical-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Email
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="vertical-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="vertical-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right"
HTMLCloseTag
    Password
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="vertical-form-2" type="text" placeholder="secret" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-5 mt-5"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="vertical-form-3" value=""
/HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="vertical-form-3" class="cursor-pointer ml-2"
HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mt-5 mt-5"
HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag

Horizontal Form 

            
                HTMLOpenTagdiv
    data-tw-merge
    class="block sm:flex items-center group form-inline"
HTMLCloseTag
    HTMLOpenTaglabel
    data-tw-merge
    for="horizontal-form-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right sm:w-20"
HTMLCloseTag
    Email
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="horizontal-form-1" type="text" placeholder="example@gmail.com" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv
    data-tw-merge
    class="block sm:flex items-center group form-inline mt-5"
HTMLCloseTag
    HTMLOpenTaglabel
    data-tw-merge
    for="horizontal-form-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 group-[.form-inline]:sm:mr-5 group-[.form-inline]:sm:text-right sm:w-20"
HTMLCloseTag
    Password
HTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    id="horizontal-form-2" type="password" placeholder="secret" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10"
/HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-5 sm:ml-20 sm:pl-5 mt-5 sm:ml-20 sm:pl-5"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="horizontal-form-3" value=""
/HTMLCloseTag
                                HTMLOpenTaglabel
    data-tw-merge
    for="horizontal-form-3" class="cursor-pointer ml-2"
HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-5 sm:ml-20 sm:pl-5"HTMLCloseTag
                                HTMLOpenTagbutton
    data-tw-merge
    class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag

Inline Form

            
                HTMLOpenTagdiv class="grid grid-cols-12 gap-2"HTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="default input inline 1" placeholder="Input inline 1" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
/HTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="default input inline 2" placeholder="Input inline 2" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
/HTMLCloseTag
                                HTMLOpenTaginput
    data-tw-merge
    type="text" aria-label="default input inline 3" placeholder="Input inline 3" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent group-[.input-group]:first:rounded-l group-[.input-group]:last:rounded-r group-[.input-group]:z-10 col-span-4 col-span-4"
/HTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag

Checkbox & Switch 

            
                HTMLOpenTagdivHTMLCloseTag
                                HTMLOpenTaglabelHTMLCloseTagVertical CheckboxHTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-1" value=""
/HTMLCloseTag
                                    HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-1" class="cursor-pointer ml-2"
HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-2" value=""
/HTMLCloseTag
                                    HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-2" class="cursor-pointer ml-2"
HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-3" value=""
/HTMLCloseTag
                                    HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-3" class="cursor-pointer ml-2"
HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabelHTMLCloseTagHorizontal CheckboxHTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTagdiv class="mt-2 flex flex-col sm:flex-row"HTMLCloseTag
                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mr-2 mr-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-4" value=""
/HTMLCloseTag
                                        HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-4" class="cursor-pointer ml-2"
HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mr-2 mt-2 sm:mt-0 mr-2 mt-2 sm:mt-0"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-5" value=""
/HTMLCloseTag
                                        HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-5" class="cursor-pointer ml-2"
HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mr-2 mt-2 sm:mt-0 mr-2 mt-2 sm:mt-0"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="checkbox-switch-6" value=""
/HTMLCloseTag
                                        HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-6" class="cursor-pointer ml-2"
HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabelHTMLCloseTagSwitchHTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="checkbox" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer rounded focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50 w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none before:checked:ml-[14px] before:checked:bg-white w-[38px] h-[24px] p-px rounded-full relative before:w-[20px] before:h-[20px] before:shadow-[1px_1px_3px_rgba(0,0,0,0.25)] before:transition-[margin-left] before:duration-200 before:ease-in-out before:absolute before:inset-y-0 before:my-auto before:rounded-full before:dark:bg-darkmode-600 checked:bg-primary checked:border-primary checked:bg-none before:checked:ml-[14px] before:checked:bg-white" id="checkbox-switch-7"
/HTMLCloseTag
                                        HTMLOpenTaglabel
    data-tw-merge
    for="checkbox-switch-7" class="cursor-pointer ml-2"
HTMLCloseTagDefault switch checkbox inputHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag

Radio

            
                HTMLOpenTagdivHTMLCloseTag
                                HTMLOpenTaglabelHTMLCloseTagVertical Radio ButtonHTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-1" name="vertical_radio_button" value="vertical-radio-chris-evans"
/HTMLCloseTag
                                    HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-1" class="cursor-pointer ml-2"
HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-2" name="vertical_radio_button" value="vertical-radio-liam-neeson"
/HTMLCloseTag
                                    HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-2" class="cursor-pointer ml-2"
HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mt-2 mt-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-3" name="vertical_radio_button" value="vertical-radio-daniel-craig"
/HTMLCloseTag
                                    HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-3" class="cursor-pointer ml-2"
HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                HTMLOpenTaglabelHTMLCloseTagHorizontal Radio ButtonHTMLOpenTag/labelHTMLCloseTag
                                HTMLOpenTagdiv class="mt-2 flex flex-col sm:flex-row"HTMLCloseTag
                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mr-2 mr-2"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-4" name="horizontal_radio_button" value="horizontal-radio-chris-evans"
/HTMLCloseTag
                                        HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-4" class="cursor-pointer ml-2"
HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mr-2 mt-2 sm:mt-0 mr-2 mt-2 sm:mt-0"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-5" name="horizontal_radio_button" value="horizontal-radio-liam-neeson"
/HTMLCloseTag
                                        HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-5" class="cursor-pointer ml-2"
HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv
    data-tw-merge
    class="flex items-center mr-2 mt-2 sm:mt-0 mr-2 mt-2 sm:mt-0"
HTMLCloseTagHTMLOpenTaginput
    data-tw-merge
    type="radio" class="transition-all duration-100 ease-in-out shadow-sm border-slate-200 cursor-pointer focus:ring-4 focus:ring-offset-0 focus:ring-primary focus:ring-opacity-20 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&[type='radio']]:checked:bg-primary [&[type='radio']]:checked:border-primary [&[type='radio']]:checked:border-opacity-10 [&[type='checkbox']]:checked:bg-primary [&[type='checkbox']]:checked:border-primary [&[type='checkbox']]:checked:border-opacity-10 [&:disabled:not(:checked)]:bg-slate-100 [&:disabled:not(:checked)]:cursor-not-allowed [&:disabled:not(:checked)]:dark:bg-darkmode-800/50 [&:disabled:checked]:opacity-70 [&:disabled:checked]:cursor-not-allowed [&:disabled:checked]:dark:bg-darkmode-800/50" id="radio-switch-6" name="horizontal_radio_button" value="horizontal-radio-daniel-craig"
/HTMLCloseTag
                                        HTMLOpenTaglabel
    data-tw-merge
    for="radio-switch-6" class="cursor-pointer ml-2"
HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag
                            HTMLOpenTag/divHTMLCloseTag