Home
Geoffrey Callaghan
Glassmorphism form

Glassmorphism form

Forked from> @sophia-baker/glassmorphism-design

This tailwind example is contributed by Geoffrey Callaghan, on 02-Nov-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Form Contact us Other

Author Geoffrey Callaghan

6.6k

Fork Fullscreen

<div class="bg-gradient-to-r from-blue-300 to-purple-500 h-screen flex justify-center items-center">
    <div class="py-8 px-6 max-w-md bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-xl backdrop-filter">
        <h1 class="text-3xl font-extrabold text-center text-gray-800 mb-5">Glassmorphism Design</h1>
        <p class="text-lg text-center text-gray-700 mb-8">Using Tailwind CSS</p>
     
        <form class="flex flex-col" action="https://fabform.io/f/{form-id}" method="post">
        <form class="flex flex-col">
            <div class="mb-5">
                <label class="text-gray-700 font-semibold mb-2" for="name">Name</label>
                <input class="bg-transparent border rounded-lg shadow border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 py-2 px-4 block w-full appearance-none leading-normal" type="text" id="name" name="name" required>
            </div>
            <div class="mb-5">
                <label class="text-gray-700 font-semibold mb-2" for="email">Email</label>
                <input class="bg-transparent border rounded-lg shadow border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 py-2 px-4 block w-full appearance-none leading-normal" type="email" id="email" name="email" required>
            </div>
            <div class="mb-5">
                <label class="text-gray-700 font-semibold mb-2" for="message">Message</label>
                <textarea class="bg-transparent border rounded-lg shadow border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 py-2 px-4 block w-full appearance-none leading-normal" id="message" name="message" rows="5" required></textarea>
            </div>
            <button class="bg-gradient-to-r from-purple-400 to-indigo-500 text-white font-semibold py-2 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out mb-5" type="submit">Send Message</button>
        </form>
           <a href="https://veilmail.io/e/FkKh7o" class="font-medium text-blue-600 hover:underline">Or click here to reveal our protected email address</a>
    
    </div>
    
</div>
</form>

Related Examples

Glassmorphism form

Author:
Sophia Baker

2 years ago

17.9k
Contact us page template
full page fancy contact us page

Author:
Lukas Müller

2 years ago

17k
Age verification 18+

Author:
Maxim

10 months ago

1k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

6 months ago

673
Mobile app
I'll create a comprehensive collection of professional app components that you can use to build modern mobile and web applications.

Author:
ishimwe prince

6 months ago

700
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

8 months ago

684
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

6 months ago

658
Sign Up form with dark mode support

Author:
Anonymous

2 years ago

12k
Login Form with Icon

Author:
Prashant

3 years ago

17.5k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

9 months ago

1.6k
Contact us Form
suitable for dark-themed websites

Author:
Anja Müller

2 years ago

9.8k
Sign in / Login Form

Author:
Bunny

3 years ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components