Input output form

This tailwind example is contributed by Prajwal Hallale, on 08-Dec-2022. Component is made with Tailwind v3.4. It is responsive.

Form

Author Prajwal Hallale

Tailwind v3.4 7.8k 3

Fork Fullscreen

<div class="flex flex-col gap-2 w-full">
        <label class="font-semibold text-lg">Input</label>
        <textarea rows="14" class=" border-2 rounded-lg bg-slate-50">                </textarea>
    </div>

<div class="relative">
            <label title="Click to upload" for="button2" class="cursor-pointer flex items-center gap-4 px-6 py-4 before:border-gray-400/60 hover:before:border-gray-300 group before:bg-gray-100 before:absolute before:inset-0 before:rounded-3xl before:border before:border-dashed before:transition-transform before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
                <div class="relative">
                    <span class="block text-base font-semibold relative text-blue-900 group-hover:text-blue-500">
                        Upload a file
                    </span>
                    <span class="mt-0.5 block text-sm text-gray-500">Max 2 MB</span>
                </div>
            </label>
            <input hidden="" type="file" id="button2">
        </div>

<button class="h-12 text-white bg-violet-600 rounded-md px-4 py-2 hover:bg-violet-800 font-semibold text-xl">Submit</button>
    </div>

<div class="flex flex-col gap-2 w-full">
        <label class="font-semibold text-lg">Output</label>
        <textarea rows="14" class=" border-2 rounded-lg bg-slate-50"></textarea>
    </div>

</div>

Related Examples

Login Form
Login Form template using angular

nitro-x

3 months ago

202
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Rajesh Maheshwari

1 year ago

2k
Apply Coupon Code form

Lyra Ravensong

3 years ago

9.3k
Sign in form
simple full-height login form

Lukas Müller

3 years ago

10.5k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Ti To

2 years ago

7.8k
Forgot Password Screen

JUGENDRA GANGWAR

3 weeks ago

42
update user
it is the layout for creating an event

seth dridi

2 years ago

2.4k
Credit card form

Oliver Hansen

3 years ago

18k
Form with multiple Inputs.

JUGENDRA GANGWAR

3 months ago

445
Default phone input

Md. Tofayel islam

2 years ago

3.7k
Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.4k