Contact UI Components – Flow Library

<section class="py-12 lg:py-24 relative overflow-hidden">
        <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/contact/waves-bg-lime.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-lg mx-auto lg:max-w-none">
                <div class="flex flex-wrap -mx-4 mb-16">
                    <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                        <h1 class="font-heading text-4xl sm:text-6xl md:text-7xl tracking-sm mb-6">Contact us</h1>
                        <p class="text-lg text-gray-700 mb-16 ">We are here to help you make a first move to greener choice. </p>
                        <div class="flex mb-4 items-center">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4 4H16C16.825 4 17.5 4.675 17.5 5.5V14.5C17.5 15.325 16.825 16 16 16H4C3.175 16 2.5 15.325 2.5 14.5V5.5C2.5 4.675 3.175 4 4 4Z" stroke="#022C22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M17.5 5.5L10 10.75L2.5 5.5" stroke="#022C22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                            
                            <span class="ml-2 font-medium">hello@example.com</span>
                        </div>
                        <div class="flex items-center">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17.5001 13.69V15.94C17.5009 16.1489 17.4581 16.3556 17.3745 16.547C17.2908 16.7384 17.168 16.9102 17.0141 17.0514C16.8602 17.1926 16.6785 17.3001 16.4806 17.367C16.2828 17.4339 16.0731 17.4588 15.8651 17.44C13.5572 17.1892 11.3403 16.4006 9.39257 15.1375C7.58044 13.986 6.04407 12.4496 4.89257 10.6375C3.62506 8.68088 2.83625 6.45323 2.59007 4.13498C2.57133 3.92758 2.59598 3.71855 2.66245 3.5212C2.72892 3.32385 2.83575 3.1425 2.97615 2.9887C3.11654 2.8349 3.28743 2.71201 3.47792 2.62787C3.6684 2.54373 3.87433 2.50018 4.08257 2.49998H6.33257C6.69655 2.4964 7.04942 2.62529 7.32539 2.86263C7.60137 3.09997 7.78163 3.42957 7.83257 3.78998C7.92754 4.51003 8.10366 5.21703 8.35757 5.89748C8.45848 6.16592 8.48032 6.45767 8.4205 6.73814C8.36069 7.01862 8.22172 7.27606 8.02007 7.47998L7.06757 8.43248C8.13524 10.3101 9.68991 11.8648 11.5676 12.9325L12.5201 11.98C12.724 11.7783 12.9814 11.6394 13.2619 11.5796C13.5424 11.5197 13.8341 11.5416 14.1026 11.6425C14.783 11.8964 15.49 12.0725 16.2101 12.1675C16.5744 12.2189 16.9071 12.4024 17.145 12.6831C17.3828 12.9638 17.5092 13.3222 17.5001 13.69Z" stroke="#022C22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                                     
                            <span class="ml-2 font-medium">(239) 555-0108</span>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 px-4">
                        <div class="relative max-w-lg lg:ml-auto p-8 bg-white rounded-2xl shadow-md overflow-hidden">
                            <div class="absolute top-0 left-0 w-full pt-1 bg-lime-500"></div>
                            <div>
                                <h4 class="text-2xl font-medium mb-8">Fill out the form</h4>
                                <form action="">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Full Name</label>
                                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Email</label>
                                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">
                                        <span>Company</span> 
                                        <span class="text-gray-700">(optional)</span>
                                    </label>
                                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Service</label>
                                    <div class="relative w-full mb-8 bg-white rounded-full">
                                        <span class="absolute top-1/2 right-0 mr-4 transform -translate-y-1/2">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.3999 8.2L9.9999 11.8L13.5999 8.2" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>  
                                        </span>    
                                        <select name="" id="" class="w-full px-4 py-3 text-gray-600 border rounded-full appearance-none cursor-pointer outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 bg-transparent relative">
                                            <option value="1">Select service</option>
                                            <option value="2">Sales</option>
                                            <option value="3">Marketing</option>
                                        </select>
                                    </div>
                                    <button class="flex w-full py-3 px-5 items-center justify-center font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">
                                        <span class="mr-2">Submit</span>
                                        <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5.25 10H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M10.5 4.75L15.75 10L10.5 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>                                        
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>