Records Form - HPower

records survey form

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

Form

Author Anonymous

Tailwind v3.4 1.9k 1

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

Registration form

Juan D. Cortorreal

11 months ago

666
MULTI-STEP FORM component
MULTI-STEP FORM WIZARD · Open Source Component Steps: Personal → Role → Preferences → Goals → Review Features: stepper, validation, conditional fields, localStorage, animated transitions, review summary

Ijila Itunu

6 months ago

479
Feedback Form with fabform.io

Ho O

1 year ago

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

Rajesh Maheshwari

1 year ago

1.8k
Forgot password form
Useful form for sending password reset link

Steven Kuhn

4 years ago

22.2k
OTP Verification Page

JUGENDRA GANGWAR

1 month ago

25
Credit card form

Oliver Hansen

3 years ago

18k
Sign in form

Simon Scheffer

3 years ago

17k
Login Form
Login Form template using angular

nitro-x

4 months ago

203
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Fathallah Anass

2 years ago

3.7k
Simple login form

R Thapa

3 years ago

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

Anja Müller

3 years ago

8.8k