Spaces:
Sleeping
Sleeping
File size: 3,686 Bytes
c77acf1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import React from "react";
const Contact = () => {
return (
<div>
<section id="contact" className="py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 grid-cols-1">
<div className="lg:mb-0 mb-10">
<div className="group w-full h-full">
<div className="relative h-full">
<img
src="https://images.unsplash.com/photo-1584463623578-37726932ba2d?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGRvY3RvcnxlbnwwfHwwfHx8MA%3D%3D"
alt="ContactUs tailwind section"
className="w-full h-full lg:rounded-l-2xl rounded-2xl bg-blend-multiply bg-indigo-700"
/>
<h1 className="font-manrope text-white text-4xl font-bold leading-10 absolute top-11 left-11">
Contact us
</h1>
</div>
</div>
</div>
<div className="bg-gray-50 p-5 lg:p-11 lg:rounded-r-2xl rounded-2xl">
<h2 className="text-indigo-600 font-manrope text-4xl font-semibold leading-10 mb-11">
Send Us A Message
</h2>
<input
type="text"
className="w-full h-12 text-gray-600 placeholder-gray-400 shadow-sm bg-transparent text-lg font-normal leading-7 rounded-full border border-gray-200 focus:outline-none pl-4 mb-10"
placeholder="Name"
/>
<input
type="text"
className="w-full h-12 text-gray-600 placeholder-gray-400 shadow-sm bg-transparent text-lg font-normal leading-7 rounded-full border border-gray-200 focus:outline-none pl-4 mb-10"
placeholder="Email"
/>
<input
type="text"
className="w-full h-12 text-gray-600 placeholder-gray-400 shadow-sm bg-transparent text-lg font-normal leading-7 rounded-full border border-gray-200 focus:outline-none pl-4 mb-10"
placeholder="Phone"
/>
<input
type="text"
className="w-full h-12 text-gray-600 placeholder-gray-400 shadow-sm bg-transparent text-lg font-normal leading-7 rounded-full border border-gray-200 focus:outline-none pl-4 mb-10"
placeholder="City"
/>
<input
type="text"
className="w-full h-12 text-gray-600 placeholder-gray-400 shadow-sm bg-transparent text-lg font-normal leading-7 rounded-full border border-gray-200 focus:outline-none pl-4 mb-10"
placeholder="State"
/>
<input
type="text"
className="w-full h-12 text-gray-600 placeholder-gray-400 shadow-sm bg-transparent text-lg font-normal leading-7 rounded-full border border-gray-200 focus:outline-none pl-4 mb-10"
placeholder="Country"
/>
<input
type="text"
className="w-full h-12 text-gray-600 placeholder-gray-400 bg-transparent text-lg shadow-sm font-normal leading-7 rounded-full border border-gray-200 focus:outline-none pl-4 mb-10"
placeholder="Message"
/>
<button className="w-full h-12 text-white text-base font-semibold leading-6 rounded-full transition-all duration-700 hover:bg-indigo-800 bg-indigo-600 shadow-sm">
Send
</button>
</div>
</div>
</div>
</section>
</div>
);
};
export default Contact;
|