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

794

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

Comment form

Author:
Sophia Baker

2 years ago

12.3k
Login template

Author:
Gabriel Urbano

1 year ago

6k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 year ago

1.8k
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

11 months ago

2.3k
update user
it is the layout for creating an event

Author:
seth dridi

1 year ago

1.8k
Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

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

8 months ago

1.2k
Instagram Login Clone

Author:
Victoria Blount

4 months ago

274
Profile Form
Stunning Profile and Cover Image Fields

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

1 year ago

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

3 months ago

623
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.6k
form text

Author:
Severino Victtorino

6 months ago

785

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components