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

5.7k

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