Glassmorphism form

This tailwind example is contributed by Sophia Baker, on 05-Apr-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form

Form Contact us Other

Author Sophia Baker

Tailwind v3.4 19.3k 8

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">
            <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>
    </div>
</div>

Related Examples

background animation
background animation

Anonymous

3 years ago

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

Lukas Müller

3 years ago

17.8k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Glassmorphism form

Geoffrey Callaghan

2 years ago

7.5k
Contact us Form
suitable for dark-themed websites

Anja Müller

3 years ago

10.6k
Get in touch contact form

Kris Showen

3 years ago

42.3k
Collapsible content

Rafferty Kim

3 years ago

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

Geoffrey Callaghan

2 years ago

8.3k
Responsive contact us section

Ron Hicks

3 years ago

15.9k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
Contact us Form
suitable for dark-themed websites

Geoffrey Callaghan

2 years ago

5.8k
Contact me form

Arya

3 years ago

12.9k