Hero Section - Copy this React, Tailwind Component to your project

I-want-a-hero-section-margin-centre-container-with-pading-x-axis-and-y-axis-16-with-screen-height-and-width,-on-centred-section-create-a-responsive-grid-of-2-rows-and-2-columns-with-equal-width-and-height,-grid-take-section-full-width-and-height.-1st-grid-has-left-top-heading,-second-grid-has-a-paragraph-at-right-center,-3rd-grid-has-a-paragraph-at-left-centre,-4th-grid-has-right-bottom-heading.-Algin-text-accordingly-to-there-position.-On-smaller-device-grid-become-3-row-1-column-with-order-change,-on-1st-grid-centre-left-heading,-on-2nd-grid-centre-right-heading,-on-3rd-grid-there-is-two-colums-on-left-bottom-is-paragraph-on-right-bottom-is-paragraph