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

Age verification 18+

Author:
Maxim

1 year ago

1k
Elegant Split-Layout Contact Form (Navy Blue Edition)
Overview: A premium contact section styled in Navy Blue (bg-blue-900) to match the Service Carousel. Key Changes: Palette: Swapped all Teal references for Deep Blue (bg-blue-900 panel, text-blue-700 accents). Interactivity: Focus rings on inputs now glow with a soft blue (focus:ring-blue-600/10). Consistency: Maintains the "DM Serif Display" typography and "blob" background effects (now in blue/indigo) for a cohesive high-end look.

Author:
Juan D. Cortorreal

1 month ago

195
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 year ago

2k
Register form

Author:
Maxim

1 year ago

1.4k
Form

Author:
Ramesh kumar Sah

9 months ago

1.2k
Multi-Step Form with Progress Tracker
sleek and interactive multi-step registration form built with Tailwind CSS and Alpine.js, perfect for onboarding users through a smooth, step-by-step experience. This component enhances user engagement with animated transitions, real-time validation, and a dynamic progress bar that visually tracks completion. It’s fully responsive, dark-mode ready, and ideal for modern SaaS applications, startup landing pages, or authentication systems. ✨ Key Features 🪜 Three-step flow: Personal Info → Account Setup → Preferences ⚡ Real-time field validation with instant feedback 🔒 Password visibility toggles for better UX 📈 Progress bar tracker with smooth animations ✅ Success confirmation with user details preview 🌙 Dark mode support for modern UI design 💨 Alpine.js-powered interactivity – no external JS frameworks needed 📱 Fully responsive design optimized for all devices 💡 Perfect for: SaaS or startup registration flows Onboarding or sign-up pages Form builders, dashboard templates, or web app UIs UI component libraries & code snippets collections

Author:
wavy kits

3 months ago

493
Simple contact us form

Author:
Lukas Müller

2 years ago

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

Author:
Ameth Galarcio

1 year ago

2.9k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

1 year ago

2.8k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

6 months ago

1k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

12k
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

7 months ago

557

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components