Home
Anonymous
Records Form - HPower

Records Form - HPower

Forked from> @jaxstone/survey-form

records survey form

This tailwind example is contributed by Anonymous, on 19-Dec-2024. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Anonymous

928

Fork Fullscreen

<div class="bg-white border rounded-lg px-8 py-6 mx-auto my-8 max-w-3x3">
    <h2 class="text-2xl font-large font-bold mb-4">Records Survey</h2>
    <form>
        <div class="mb-4">
            <label for="doverNumber" class="block text-gray-700 font-medium mb-2">Existing Dover Job Number</label>
            <input type="text" id="doverNumber" name="doverNumber"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="jobNumber" class="block text-gray-700 font-medium mb-2">Job Number</label>
            <input type="text" id="jobNumber" name="jobNumber"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="elevatorClass" class="block text-gray-700 font-medium mb-2">Elevator Class</label>
            <select id="elevatorClass" name="elevatorClass"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
                <option value=""></option>
                <option value="passenger">Passenger</option>
                <option value="freight">Freight</option>
            </select>
        </div>
        <h4 class="text-2xl font-medium mb-4">Capacity | Up & Down Speed | Motor HP</h4>
        <div class="mb-4">
            <label for="capacity" class="block text-gray-700 font-medium mb-2">Capacity</label>
            <input type="number" id="capacity" name="capacity"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="upSpeed" class="block text-gray-700 font-medium mb-2">Up Speed</label>
            <input type="number" id="upSpeed" name="upSpeed"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="downSpeed" class="block text-gray-700 font-medium mb-2">Down Speed</label>
            <input type="number" id="downSpeed" name="downSpeed"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="motorHP" class="block text-gray-700 font-medium mb-2">Motor HP</label>
            <input type="number" id="motorHP" name="motorHP"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <h4 class="text-2xl font-medium mb-4">Landings / Openings</h4>
        <div class="mb-4">
            <label for="landings" class="block text-gray-700 font-medium mb-2">Landings</label>
            <input type="number" id="landings" name="landings"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="fopenings" class="block text-gray-700 font-medium mb-2">Front Openings</label>
            <input type="number" id="fopenings" name="fopenings"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <div class="mb-4">
            <label for="ropenings" class="block text-gray-700 font-medium mb-2">Rear Openings</label>
            <input type="number" id="ropenings" name="ropenings"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
        </div>
        <h4 class="text-2xl font-medium mb-4">Jack - Plunger Diameter</h4>
        <div class="mb-4">
            <label for="plungerDiameter" class="block text-gray-700 font-medium mb-2">Plunger Diameter</label>
            <select id="plungerDiameter" name="plungerDiameter"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" required>
                <option value=""></option>
                <option value="2-s">2-S</option>
                <option value="3-s">3-S</option>
                <option value="4-s">4-S</option>
                <option value="5-s">5-S</option>
                <option value="6-s">6-S</option>
            </select>
        </div>
        <div class="mb-4">
            <label for="notes" class="block text-gray-700 font-medium mb-2">Notes</label>
            <textarea id="notes" name="notes"
                class="border border-gray-400 p-2 w-full rounded-lg focus:outline-none focus:border-blue-400" rows="5"></textarea>
        </div>
        <div>
            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Submit</button>
        </div>

</form>
</div>

Related Examples

Responsive Form2

Author:
ABDO-SY

8 months ago

982
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.2k
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

2.3k
User registration form with Instructions

Author:
Fagundo67

2 years ago

24.4k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.7k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

7 months ago

990
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

1 year ago

2.9k
Login Form

Author:
Amit Pachange

3 years ago

12.8k
Contact us form template with fabform

Author:
Ho O

10 months ago

990
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Author:
Juan D. Cortorreal

4 days ago

22
Feedback form with fabform.io
Collect opinions about your company's service

Author:
Ho O

10 months ago

981

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components