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.7k

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

Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

3.8k
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

6 months ago

891
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

6.8k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

4k
Login form

Author:
Leon Bachmann

2 years ago

13.3k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Author:
Ameth Galarcio

8 months ago

1.2k
Contact Form
with hidden email

Author:
Geoffrey Callaghan

1 year ago

5.8k
Upload file input field

Author:
Gopi Yadav

2 years ago

12.9k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

4 months ago

1.5k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Author:
Quentin Rivers

5 months ago

3.1k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

1 week ago

25
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

Author:
Ti To

1 year ago

5.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components