Tailwind Contact Form
Web2tailwind.com

Output

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto&display=swap" rel="stylesheet">
</head>

<body style="font-family:Roboto">
    <section>
    <iframe class="z-0" style="height:30rem"
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3533.752036882922!2d85.31633196506111!3d27.66314248281019!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19d41edbb1ab%3A0x8dd6d2fc131e244f!2sMahalaxmisthan%2C+Patan+44700!5e0!3m2!1sen!2snp!4v1544329696911"
        width="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
    <div class="container" style="height:26rem; margin-top:-28rem;">
        <div class="flex">
            <div class="ml-auto w-1/3">
                <div class="relative shadow-lg bg-white px-6 py-6">
                    <h3 class="text-center text-2xl font-bold font-open-sans mb-4">Contact Us</h3>
                    <form>
                        <div class="flex -mx-4 mb-2">
                            <div class="w-1/2 mx-4">
                                <label class="font-light">First Name</label>
                                <input type='text' class="w-full border rounded px-3 py-1 text-gray-700" />
                            </div>
                            <div class="w-1/2 mx-4">
                                <label class="font-light">First Name</label>
                                <input type='text' class="w-full border rounded px-3 py-1 text-gray-700" />
                            </div>
                        </div>
                        <div class="mb-2">
                            <label class="font-light">Mobile Number</label>
                            <input type='text' class="w-full border rounded px-3 py-1 text-gray-700" />
                        </div>
                        <div>
                            <label class="font-light">Tell us about you</label>
                            <textarea class="px-2 py-1 w-full border rounded" rows="4"></textarea>
                        </div>
                        <div class="pb-6">
                            <button type="button"
                                class="text-sm bg-blue-600 text-gray-200 rounded px-3 py-2 float-right">
                                Save Form</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

</body>

</html>
© 2019 - 2022 Web2tailwind.com