Home
Prajwal Hallale
Input output form

Input output form

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

Form

Author Prajwal Hallale

7.8k

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

Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

3 years ago

15k
Contact me form

Author:
Arya

3 years ago

12.3k
User registration form

Author:
Leon Bachmann

3 years ago

25.1k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.4k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

2.3k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

11 months ago

1.7k
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

1 month ago

138
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

2 years ago

6.2k
animation login form
An animated login form enhances the user experience by making the interaction visually engaging and modern. Below is a breakdown of key animation techniques used in animated login forms, plus examples you can use or customize.

Author:
Nicole Shalom

8 months ago

1.1k
Login Form with Icon

Author:
Akai

4 months ago

165
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

7 months ago

763
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components