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

1.2k

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

Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

1 year ago

799
3D Login form
Made a responsive and the 3d animative

Author:
Sufyan jutt

5 days ago

16
Payment form (Alpine JS)

Author:
Mr Robot

3 years ago

10.2k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

12k
Simple login page template

Author:
Freja Jensen

3 years ago

12.6k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

5.3k
Reservation form with fabform.io

Author:
Ho O

1 year ago

1.4k
Car booking form
Rental carr booking form to rent a car online

Author:
ehmasuk

3 months ago

260
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

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

1 year ago

10.1k
Responsive Contact Form with TailwindCSS
A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

Author:
SHARIFUL ISLAM

11 months ago

1.3k
Contact us form template

Author:
Lukas Müller

3 years ago

9.2k
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Author:
Anonymous

2 years ago

13k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components