Contact form block for use with homepage of websites and landing pages.

Dependencies

  • Tailwind CSS
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - Contact Form 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="contact-2 bg-gray-100 py-6 md:py-12">
        <div class="container px-4 mx-auto">

            <div class="text-center md:max-w-2xl md:mx-auto px-2 md:pb-4">
                <strong class="text-gray-500 uppercase">Get Started</strong>
                <h1 class="text-3xl md:text-4xl font-medium my-2">Get in Touch with Us</h1>
                <div class="contact-form mt-6 md:mt-12">

                    <div class="mb-4">
                        <textarea name="message" id="message" cols="30" rows="5" placeholder="Send us your queries or feedback" class="border-2 border-solid rounded py-2 px-3 placeholder-gray-500 placeholder-opacity-100 w-full focus:border-indigo-300 input transition-colors transtion-"></textarea>
                    </div>

                    <div class="mb-4 flex">
                        <div class="flex-grow">
                            <input type="text" placeholder="Your E-mail" class="border-2 border-solid rounded py-2 px-3 placeholder-gray-500 placeholder-opacity-100 w-full focus:border-indigo-300 input">
                        </div>
                        <button class="bg-indigo-600 hover:bg-indigo-700 text-white border-2 border-solid border-indigo-600 rounded py-2 px-4 flex-shrink-0 ml-4 transition-colors duration-300">
                            <i class="fab fa-telegram-plane"></i>
                        </button>
                    </div>

                </div>
            </div>

            <div class="md:flex md:-mx-4 text-center mt-6 md:mt-12 pt-6 border-t-2 border-solid">
                <div class="md:px-4 md:w-1/3">
                    <address>
                        <div class="font-bold mb-2">West Chicago, IL</div>
                        <span>
                            44 Shirley Ave.<br>
                            West Chicago, IL 60185
                        </span>
                    </address>
                </div>
                <div class="md:px-4 md:w-1/3 mt-8 md:mt-0">
                    <address>
                        <div class="font-bold mb-2">Orlando, FL</div>
                        <span>
                            514 S. Magnolia St.<br>
                            Orlando, FL 32806
                        </span>
                    </address>
                </div>
                <div class="md:px-4 md:w-1/3 mt-8 md:mt-0">
                    <address>
                        <div class="font-bold mb-2">West Chicago, IL</div>
                        <span>
                            4 Goldfield Rd.<br>
                            Honolulu, HI 96815
                        </span>
                    </address>
                </div>
            </div>

        </div>
    </div>
    <!-- /.contact-2 -->

    <!-- Scripts -->
</body>
</html>
// Variables
$primary: #5863f8;

// Custom CSS
.input:focus {
  box-shadow: 0 0 0 0.2rem rgba($primary, 0.15);
}
.input:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.15);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.15);
}
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvZm9ybS9jb250YWN0LWZvcm0tMg==