Contact Us - Copy this React, Tailwind Component to your project
Design-a-professional-and-responsive-'Contact-Us'-section-with-the-following-features:-Overall-Layout-and-Structure-The-section-is-divided-into-two-main-columns-of-equal-width:-Left-Column:-A-user-input-form-for-contacting-the-team.-Right-Column:-Detailed-contact-information-with-icons-for-visual-clarity.-The-entire-section-is-centered-on-the-page-with-ample-white-space-around-the-edges-for-a-clean-and-uncluttered-look.-Background:-Pure-white-to-create-contrast-with-the-form-and-contact-details.-Alignment:-All-text-is-left-aligned-except-the-title,-which-is-center-aligned.-Header-(Top-of-Section)-Title:-Text:-'Connect-with-Our-Team'.-Style:-Large,-bold-font-in-black,-centrally-aligned.-Special-Effect:-A-light-blue-underline-styled-as-a-thin-bar-directly-beneath-the-text.-Subtitle/Description:-Text:-Placeholder-'Lorem-ipsum-dolor-sit-amet...'-spanning-two-lines.-Style:-Lighter-weight-font-in-a-medium-gray-color.-Font-Size:-Smaller-than-the-title,-approximately-half-its-size.-Left-Column:-Contact-Form-Form-Container:-Background-Color:-Light-gray-(#F4F4F4).-Borders:-Rounded-corners-with-a-10px-radius.-Spacing:-Uniform-padding-(20px)-inside-the-container.-Shadow:-Very-subtle-box-shadow-(RGBA,-0,-0,-0,-0.1)-for-a-slight-elevation-effect.-Form-Fields:-First-Row:-Two-side-by-side-input-fields,-equally-spaced-with-a-10px-gap.-Field-1:-Placeholder-text-'Input-your-name'.-Field-2:-Placeholder-text-'Input-your-email'.-Input-Field-Style:-Background:-White.-Border:-Thin,-light-gray-(1px-solid-#D9D9D9).-Padding:-10px-inside-each-field.-Rounded-corners-(5px).-Second-Row:-Single-input-field-with-a-placeholder:-'Subject'.-Same-style-as-above,-spanning-the-full-width.-Third-Row:-A-multiline-textarea-for-'Submit-your-message-request'.-Height:-Approximately-100px.-Style:-Matches-the-input-fields.-Submit-Button:-Text:-'Send-message'.-Background-Color:-Black-(#000000).-Text-Color:-White.-Font:-Bold-and-slightly-larger-than-form-text.-Button-Shape:-Slightly-rounded-with-a-5px-border-radius.-Padding:-10px-top-and-bottom,-20px-left-and-right.-Hover-Effect:-Button-background-changes-to-dark-gray-(#333333).-Right-Column:-Contact-Details-Description:-Text:-Placeholder-text-spanning-three-lines,-e.g.,-'Lorem-ipsum-dolor-sit-amet,-consectet...'.-Style:-Lighter-gray-font,-slightly-smaller-than-the-form-text.-Details-Boxes:-Layout:-Four-equally-spaced-boxes,-arranged-in-two-rows-with-a-10px-vertical-gap-between-them.-Each-box-contains:-Icon:-Positioned-on-the-left-within-the-box.-Style:-Monochrome-black-icon,-simplistic-and-flat-design.-Size:-20px-by-20px.-Text:-Bold-heading-(e.g.,-Address,-Mobile)-directly-following-the-icon.-Subtext-beneath-the-heading,-e.g.,-the-actual-address-or-phone-number.-Font-Style:-Medium-weight-black-for-headings,-lighter-weight-gray-for-subtext.-Box-Style:-Background-Color:-White.-Border:-Thin,-light-gray-(1px-solid-#D9D9D9).-Rounded-Corners:-5px.-Padding:-15px-inside-each-box.-Details-to-Include:-Box-1:-Icon:-Pin-icon-(location-marker).-Text:-'Jl.-Raya-Kuta-No.-121'.-Box-2:-Icon:-Phone-icon.-Text:-'(+021)-789-345'.-Box-3:-Icon:-Clock-icon.-Text:-'Daily-09-am---05-pm'.-Box-4:-Icon:-Envelope-icon.-Text:-'admin@support.com'.-Footer-Section:-Social-Media-Icons-Description:-Text:-'Social-Media:'.-Style:-Simple,-bold,-black-font.-Positioned-directly-above-the-social-icons.-Icons:-Layout:-Row-of-four-icons-(Facebook,-Twitter,-LinkedIn,-Instagram).-Style:-Color:-Black-monochrome.-Size:-20px-by-20px,-evenly-spaced.-Hover-Effect:-Icons-change-color-to-light-gray-(#A6A6A6).-Alignment:-Icons-are-horizontally-aligned-and-spaced-equally-(15px-gap).-Responsive-Design-Considerations-Mobile-View:-Stack-columns-vertically.-Adjust-padding-for-smaller-screens-(reduce-to-10px).-Ensure-input-fields-and-buttons-span-the-full-width-of-the-container.-Tablet-View:-Retain-two-column-layout-but-reduce-column-width-slightly-for-better-spacing.-Desktop-View:-Maintain-equal-width-columns-with-proportional-spacing-as-described-above.
