CONTACT US - GET IN TOUCH - PORTFOLIO

Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

This tailwind example is contributed by ABDO-SY, on 14-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form,Typography, Title, h1, h2, h3

Card Contact us Heading

Author ABDO-SY

Tailwind v3.4 2.5k 5

Fork Fullscreen

<section id="CallMe" class="relative py-14 mt-[100px] bg-black">
  <div class="z-10 absolute opacity-90 rounded-full blur-[200px] w-[40%] h-[40%] bg-blue-600 top-[200px] ml-[20%]">
  </div>
  <div id="GET IN TOUCH"
    class="flex  select-auto mx-auto items-center justify-center gap-3 sm:pb-1 w-[210px] sm:w-[410px] border-b-4 sm:border-b-8 border-[#38B7FF] border-primary font-black">
    <svg aria-hidden="true" class="icon" width="50" height="50" fill="none" xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 50 53" id="call_us">
      <path
        d="M21.4286 0C15.5134 0 10.7143 4.74792 10.7143 10.6C10.7143 16.4521 15.5134 21.2 21.4286 21.2C27.3437 21.2 32.1429 16.4521 32.1429 10.6C32.1429 4.74792 27.3437 0 21.4286 0ZM16.0714 24.7333C7.17076 24.7333 0 31.8276 0 40.6333V42.4C0 46.3198 3.1808 49.4667 7.14286 49.4667H28.5714V45.9333H17.8571V31.8H28.5714V24.8299C27.9855 24.7609 27.3856 24.7333 26.7857 24.7333H16.0714ZM32.1429 24.7333V35.3333H21.4286V42.4H32.1429V53H39.2857V42.4H50V35.3333H39.2857V24.7333H32.1429Z"
        fill="#38B7FF"></path>
    </svg>
    <h2 class="text-white text-2xl sm:text-[48px]">GET IN TOUCH</h2>
  </div>
  <div class="z-20 relative px-5 mt-20 md:mt-24 flex flex-wrap gap-7 justify-center lg:max-w-[800px] mx-auto ">
    <div
      class="w-[100px] hover:scale-[1.1] h-[125px] sm:w-[200px] sm:h-[225px] gap-1 md:gap-4 flex flex-col  px-2 py-3 justify-center items-center bg-white  bg-opacity-30 rounded-[25px]">
      <svg aria-hidden="true" class="icon w-[64px] sm:w-[100px] h-[64px] sm:h-[100px]" fill="none"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="whatsapp">
        <path
          d="M10.1416 90.2147L15.7541 69.7251C12.2916 63.7292 10.4708 56.9251 10.4729 49.9563C10.4833 28.1542 28.2249 10.4167 50.0291 10.4167C60.6103 10.4209 70.5395 14.5397 78.0083 22.0126C85.4749 29.4876 89.5874 39.4209 89.5833 49.9876C89.5749 71.7897 71.8291 89.5292 50.0291 89.5292H50.0124C43.3937 89.5272 36.8874 87.8667 31.1103 84.7147L10.1416 90.2147Z"
          fill="white"></path>
        <path
          d="M10.1418 91.2562C9.86683 91.2562 9.60016 91.1479 9.40225 90.9479C9.14183 90.6833 9.03975 90.2979 9.13766 89.9417L14.6356 69.8667C11.2272 63.8125 9.42933 56.9375 9.4335 49.9583C9.44183 27.5792 27.6522 9.375 50.0293 9.375C60.8835 9.37917 71.0814 13.6063 78.746 21.2771C86.4106 28.95 90.6293 39.1458 90.6252 49.9875C90.6168 72.3646 72.4043 90.5708 50.0293 90.5708C43.3856 90.5687 36.8127 88.9292 30.9793 85.8271L10.4064 91.2208C10.3189 91.2458 10.2314 91.2562 10.1418 91.2562Z"
          fill="white"></path>
        <path
          d="M50.0293 10.4166C60.6106 10.4208 70.5397 14.5395 78.0085 22.0124C85.4751 29.4874 89.5876 39.4207 89.5835 49.9874C89.5751 71.7895 71.8293 89.5291 50.0293 89.5291H50.0126C43.3939 89.527 36.8876 87.8666 31.1106 84.7145L10.1418 90.2145L15.7543 69.7249C12.2918 63.7291 10.471 56.9249 10.4731 49.9562C10.4835 28.1541 28.2251 10.4166 50.0293 10.4166ZM50.0293 8.33325C27.0793 8.33325 8.40014 27.0041 8.38972 49.9562C8.38764 56.9708 10.1585 63.8833 13.5168 70.002L8.13139 89.6666C7.93556 90.3853 8.13556 91.152 8.66056 91.6812C9.05639 92.0812 9.59181 92.2999 10.1418 92.2999C10.3189 92.2999 10.496 92.277 10.671 92.2312L30.8522 86.9395C36.7439 89.9978 43.3481 91.6124 50.0126 91.6145C72.9793 91.6145 91.6585 72.9416 91.6689 49.9895C91.6731 38.8666 87.346 28.4083 79.4856 20.5416C71.621 12.6728 61.1606 8.33742 50.0293 8.33325Z"
          fill="#CFD8DC"></path>
        <path
          d="M73.1333 27.1375C66.925 20.925 58.6729 17.5021 49.8896 17.5C31.7562 17.5 17.0083 32.2417 17 50.3625C16.9979 56.5729 18.7354 62.6187 22.0271 67.8542L22.8104 69.0979L19.4875 81.225L31.9313 77.9625L33.1333 78.675C38.1792 81.6708 43.9667 83.2542 49.8667 83.2562H49.8792C68 83.2562 82.7479 68.5125 82.7542 50.3896C82.7562 41.6083 79.3417 33.35 73.1333 27.1375Z"
          fill="#38B7FF"></path>
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M40.1418 33.4271C39.4022 31.7813 38.6231 31.7479 37.9168 31.7188C37.3397 31.6938 36.6814 31.6958 36.0231 31.6958C35.3647 31.6958 34.2939 31.9438 33.3877 32.9333C32.4814 33.9229 29.9272 36.3125 29.9272 41.175C29.9272 46.0375 33.4689 50.7375 33.9627 51.3958C34.4564 52.0542 40.8002 62.3521 50.846 66.3146C59.1939 69.6063 60.8939 68.9521 62.7064 68.7875C64.5189 68.6229 68.5543 66.3979 69.3772 64.0896C70.2002 61.7813 70.2002 59.8042 69.9543 59.3917C69.7064 58.9792 69.0481 58.7333 68.0606 58.2375C67.0731 57.7417 62.2127 55.3521 61.3064 55.0229C60.4002 54.6938 59.7418 54.5292 59.0814 55.5188C58.4231 56.5063 56.5293 58.7333 55.9522 59.3917C55.3752 60.0521 54.7981 60.1354 53.8106 59.6396C52.8231 59.1438 49.6397 58.1021 45.8627 54.7354C42.9252 52.1167 40.9418 48.8813 40.3647 47.8917C39.7877 46.9042 40.3022 46.3688 40.7981 45.875C41.2418 45.4313 41.7856 44.7208 42.2814 44.1438C42.7752 43.5667 42.9397 43.1542 43.2689 42.4958C43.5981 41.8354 43.4335 41.2583 43.1856 40.7646C42.9418 40.2688 41.021 35.3813 40.1418 33.4271Z"
          fill="white"></path>
      </svg>
      <h3 class="text-base capitalize  font-black text-white sm:text-[28px]">whatsapp</h3>
      <p class="text-sm text-center font-regular text-[#A4A4A5] sm:text-xl  "><a target="_blank"
          href="https://wa.me/123456789">+123456789</a></p>
    </div>
    <div
      class="w-[100px] hover:scale-[1.1] h-[125px] sm:w-[200px] sm:h-[225px] gap-1 md:gap-4 flex flex-col  px-2 py-3 justify-center items-center bg-white  bg-opacity-30 rounded-[25px]">
      <svg aria-hidden="true" class="icon w-[64px] sm:w-[100px] h-[64px] sm:h-[100px]" fill="none"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="telegram">
        <path
          d="M50.0002 8.33325C38.9495 8.33325 28.3514 12.7231 20.5374 20.5371C12.7234 28.3512 8.3335 38.9492 8.3335 49.9999C8.3335 61.0506 12.7234 71.6487 20.5374 79.4627C28.3514 87.2767 38.9495 91.6666 50.0002 91.6666C61.0508 91.6666 71.6489 87.2767 79.4629 79.4627C87.277 71.6487 91.6668 61.0506 91.6668 49.9999C91.6668 38.9492 87.277 28.3512 79.4629 20.5371C71.6489 12.7231 61.0508 8.33325 50.0002 8.33325Z"
          fill="#38B7FF"></path>
        <path
          d="M70.7293 31.2501L62.9252 71.0959C62.9252 71.0959 62.5897 72.9168 60.3314 72.9168C59.1314 72.9168 58.5127 72.3459 58.5127 72.3459L41.6085 58.3188L33.3377 54.1501L22.7231 51.3272C22.7231 51.3272 20.8335 50.7813 20.8335 49.2188C20.8335 47.9168 22.7772 47.2959 22.7772 47.2959L67.1856 29.6543C67.1856 29.6543 68.5418 29.1647 69.5314 29.1668C70.1397 29.1668 70.8335 29.4272 70.8335 30.2084C70.8335 30.7293 70.7293 31.2501 70.7293 31.2501Z"
          fill="white"></path>
        <path
          d="M47.9169 63.5522L40.7794 70.5814C40.7794 70.5814 40.469 70.8209 40.0544 70.8314C39.9106 70.8355 39.7565 70.8126 39.5981 70.7418L41.6065 58.3147L47.9169 63.5522Z"
          fill="#B0BEC5"></path>
        <path
          d="M62.2856 37.9084C61.9335 37.45 61.2835 37.3667 60.8252 37.7146L33.3335 54.1667C33.3335 54.1667 37.721 66.4417 38.3897 68.5667C39.0606 70.6938 39.5981 70.7438 39.5981 70.7438L41.6064 58.3167L62.0897 39.3667C62.5481 39.0188 62.6335 38.3667 62.2856 37.9084Z"
          fill="#CFD8DC"></path>
      </svg>
      <h3 class="text-base capitalize  font-black text-white sm:text-[28px]">telegram</h3>
      <p class="text-sm text-center font-regular text-[#A4A4A5] sm:text-xl  "><a target="_blank"
          href="https://t.me/username">UserName</a></p>
    </div>
    <div
      class="w-[100px] hover:scale-[1.1] h-[125px] sm:w-[200px] sm:h-[225px] gap-1 md:gap-4 flex flex-col  px-2 py-3 justify-center items-center bg-white  bg-opacity-30 rounded-[25px]">
      <svg aria-hidden="true" class="icon w-[64px] sm:w-[100px] h-[64px] sm:h-[100px]" fill="none"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="location">
        <path
          d="M78.75 28.7656C78.75 21.1407 75.721 13.828 70.3293 8.4363C64.9376 3.04463 57.625 0.015625 50 0.015625C42.375 0.015625 35.0623 3.04463 29.6707 8.4363C24.279 13.828 21.25 21.1407 21.25 28.7656C21.25 44.6406 50 84.7812 50 84.7812C50 84.7812 78.75 44.6406 78.75 28.7656ZM31.25 28.7656C31.25 25.0572 32.3497 21.4321 34.4099 18.3487C36.4702 15.2653 39.3986 12.862 42.8247 11.4429C46.2508 10.0237 50.0208 9.65243 53.6579 10.3759C57.2951 11.0994 60.636 12.8851 63.2583 15.5074C65.8805 18.1296 67.6663 21.4705 68.3897 25.1077C69.1132 28.7448 68.7419 32.5148 67.3227 35.9409C65.9036 39.3671 63.5004 42.2954 60.4169 44.3557C57.3335 46.416 53.7084 47.5156 50 47.5156C45.0272 47.5156 40.2581 45.5402 36.7417 42.0239C33.2254 38.5076 31.25 33.7384 31.25 28.7656Z"
          fill="#38B7FF"></path>
        <path
          d="M64.4687 67.1875C62.3125 70.7031 60.2188 73.9531 58.375 76.7344C66.1875 77.7969 71.6563 80.2969 71.6563 83.2344C71.6563 87.1094 61.9688 90.2656 50 90.2656C38.0313 90.2656 28.3437 87.1406 28.3437 83.2344C28.3437 80.2812 33.8438 77.7812 41.6406 76.7344C39.7969 73.9531 37.7031 70.6875 35.5469 67.1719C16.6406 69.3125 2.98438 75.6562 2.98438 83.1719C2.98438 92.4687 24.0312 100 50 100C75.9688 100 97.0156 92.4687 97.0156 83.1719C97.0156 75.6562 83.3594 69.3125 64.4687 67.1875Z"
          fill="#38B7FF"></path>
      </svg>
      <h3 class="text-base capitalize  font-black text-white sm:text-[28px]">location</h3>
      <p class="text-sm text-center font-regular text-[#A4A4A5] sm:text-xl  "><a target="_blank" href="location">Syria
          Aleppo</a></p>
    </div>
    <div
      class="w-[100px] hover:scale-[1.1] h-[125px] sm:w-[200px] sm:h-[225px] gap-1 md:gap-4 flex flex-col  px-2 py-3 justify-center items-center bg-white  bg-opacity-30 rounded-[25px]">
      <svg aria-hidden="true" class="icon w-[64px] sm:w-[100px] h-[64px] sm:h-[100px]" fill="none"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="linkedin">
        <path
          d="M87.5 77.0833C87.5 82.8375 82.8375 87.5 77.0833 87.5H22.9167C17.1646 87.5 12.5 82.8375 12.5 77.0833V22.9167C12.5 17.1625 17.1646 12.5 22.9167 12.5H77.0833C82.8375 12.5 87.5 17.1625 87.5 22.9167V77.0833Z"
          fill="#38B7FF"></path>
        <path opacity="0.05"
          d="M62.4998 77.0834V56.0438C62.4998 52.5251 60.7936 50.423 57.9332 50.423C56.2353 50.423 54.9873 51.3792 54.2269 53.2647C54.1915 53.398 54.1415 53.9417 54.1623 55.5855L54.1665 77.0834H39.5832V37.5001H54.1665V39.7105C56.2957 38.2417 58.9061 37.5001 61.954 37.5001C71.4269 37.5001 77.0811 43.9438 77.0811 54.7376L77.0832 77.0834H62.4998ZM22.9165 77.0834V37.5001H30.1186C25.9457 37.5001 22.9165 34.4334 22.9165 30.2063C22.9165 25.9834 25.9957 22.9167 30.2373 22.9167C34.429 22.9167 37.4144 25.898 37.4998 30.1647C37.4998 34.423 34.4186 37.5001 30.1769 37.5001H37.4998V77.0834H22.9165Z"
          fill="black"></path>
        <path opacity="0.07"
          d="M63.5418 76.0416V56.0437C63.5418 51.9332 61.3939 49.3812 57.9335 49.3812C55.2356 49.3812 53.9022 51.2812 53.2606 52.8749C53.0897 53.2895 53.1127 54.9353 53.121 55.6374L53.1252 76.0416H40.6252V38.5416H53.1252V41.9541C54.7814 40.2395 57.4481 38.5416 61.9543 38.5416C70.7731 38.5416 76.0397 44.5958 76.0397 54.7374L76.0418 76.0416H63.5418ZM23.9585 76.0416V38.5416H36.4585V76.0416H23.9585ZM30.1189 36.4583C26.5502 36.4583 23.9585 33.8291 23.9585 30.2062C23.9585 26.5853 26.6002 23.9583 30.2377 23.9583C33.8293 23.9583 36.3856 26.5187 36.4585 30.1853C36.4585 33.8291 33.8168 36.4583 30.1772 36.4583H30.1189Z"
          fill="black"></path>
        <path
          d="M25 39.5833H35.4167V75H25V39.5833ZM30.1771 35.4167H30.1187C27.0104 35.4167 25 33.1 25 30.2062C25 27.25 27.0729 25 30.2375 25C33.4062 25 35.3583 27.25 35.4167 30.2062C35.4167 33.0979 33.4062 35.4167 30.1771 35.4167ZM75 75H64.5833V56.0437C64.5833 51.4646 62.0312 48.3396 57.9333 48.3396C54.8062 48.3396 53.1146 50.4479 52.2937 52.4854C51.9937 53.2146 52.0833 55.2312 52.0833 56.25V75H41.6667V39.5833H52.0833V45.0333C53.5854 42.7083 55.9375 39.5833 61.9542 39.5833C69.4083 39.5833 74.9979 44.2708 74.9979 54.7375L75 75Z"
          fill="white"></path>
      </svg>
      <h3 class="text-base capitalize  font-black text-white sm:text-[28px]">linkedin</h3>
      <p class="text-sm text-center font-regular text-[#A4A4A5] sm:text-xl  "><a target="_blank"
          href="https://www.linkedin.com/in/abdulbasit-abdulgani">Abdulbasit</a></p>
    </div>
    <div
      class="w-[100px] hover:scale-[1.1] h-[125px] sm:w-[200px] sm:h-[225px] gap-1 md:gap-4 flex flex-col  px-2 py-3 justify-center items-center bg-white  bg-opacity-30 rounded-[25px]">
      <svg aria-hidden="true" class="icon w-[64px] sm:w-[100px] h-[64px] sm:h-[100px]" fill="none"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="github">
        <path
          d="M35.582 93.672C37.004 93.06 38 91.646 38 90V79.2C38 78.806 38.032 78.396 38.082 77.98C38.054 77.988 38.028 77.994 38 78C38 78 32 78 30.8 78C27.8 78 25.2 76.8 24 74.4C22.6 71.8 22 67.4 18.4 65C17.8 64.6 18.2 64 19.4 64C20.6 64.2 23.2 65.8 24.8 68C26.6 70.2 28.4 72 31.6 72C36.574 72 39.24 71.75 40.844 70.89C42.712 68.112 45.298 66 48 66V65.95C36.664 65.586 29.422 61.818 26.05 56C18.72 56.084 12.338 56.81 8.696 57.414C8.58 56.76 8.48 56.102 8.394 55.44C11.988 54.848 18.08 54.146 25.084 54.012C24.86 53.46 24.666 52.894 24.502 52.314C17.48 51.958 11.42 52.236 8.128 52.508C8.088 51.844 8.034 51.182 8.026 50.51C11.324 50.24 17.22 49.97 24.062 50.288C23.904 49.288 23.802 48.266 23.802 47.202C23.802 43.802 25.002 40.202 27.202 37.202C26.202 33.802 24.802 26.602 27.602 24.002C33.002 24.002 36.802 26.602 38.602 28.202C42 26.8 45.8 26 50 26C54.2 26 58 26.8 61.2 28.2C63 26.6 66.8 24 72.2 24C75.2 26.8 73.6 34 72.6 37.2C74.8 40.2 76 43.6 75.8 47.2C75.8 48.168 75.71 49.102 75.58 50.018C82.578 49.674 88.634 49.95 91.988 50.222C91.984 50.896 91.922 51.554 91.886 52.22C88.544 51.944 82.336 51.66 75.168 52.042C74.99 52.714 74.774 53.368 74.518 54.002C81.61 54.094 87.848 54.78 91.614 55.38C91.528 56.044 91.428 56.702 91.312 57.354C87.488 56.742 80.97 56.026 73.554 55.99C70.224 61.746 63.114 65.5 52 65.938V66C57.2 66 62 73.8 62 79.2V90C62 91.646 62.996 93.06 64.418 93.672C82.74 87.608 96 70.328 96 50C96 24.636 75.366 4 50 4C24.634 4 4 24.636 4 50C4 70.328 17.26 87.608 35.582 93.672Z"
          fill="#38B7FF"></path>
      </svg>
      <h3 class="text-base capitalize  font-black text-white sm:text-[28px]">github</h3>
      <p class="text-sm text-center font-regular text-[#A4A4A5] sm:text-xl  "><a target="_blank"
          href="https://github.com/3bd0sy">@3bd0sy</a></p>
    </div>
    <div
      class="w-[100px] hover:scale-[1.1] h-[125px] sm:w-[200px] sm:h-[225px] gap-1 md:gap-4 flex flex-col  px-2 py-3 justify-center items-center bg-white  bg-opacity-30 rounded-[25px]">
      <svg aria-hidden="true" class="icon w-[64px] sm:w-[100px] h-[64px] sm:h-[100px]" fill="none"
        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="email">
        <path
          d="M83.2187 83.125H16.2812C12.7601 83.1209 9.38438 81.7203 6.89456 79.2304C4.40473 76.7406 3.00414 73.3649 3 69.8437V29.7812C3.00414 26.2601 4.40473 22.8844 6.89456 20.3946C9.38438 17.9047 12.7601 16.5041 16.2812 16.5H83.2187C86.7399 16.5041 90.1156 17.9047 92.6055 20.3946C95.0953 22.8844 96.4959 26.2601 96.5 29.7812V69.8437C96.4959 73.3649 95.0953 76.7406 92.6055 79.2304C90.1156 81.7203 86.7399 83.1209 83.2187 83.125ZM16.2812 21.1875C14.002 21.1875 11.8162 22.0929 10.2046 23.7046C8.59291 25.3162 7.6875 27.502 7.6875 29.7812V69.8437C7.6875 72.123 8.59291 74.3088 10.2046 75.9204C11.8162 77.5321 14.002 78.4375 16.2812 78.4375H83.2187C85.4979 78.4375 87.6838 77.5321 89.2954 75.9204C90.9071 74.3088 91.8125 72.123 91.8125 69.8437V29.7812C91.8125 27.502 90.9071 25.3162 89.2954 23.7046C87.6838 22.0929 85.4979 21.1875 83.2187 21.1875H16.2812Z"
          fill="#38B7FF"></path>
        <path
          d="M49.9998 59.5C47.1085 59.5045 44.2945 58.5665 41.9842 56.8281L5.49978 29.2343C5.242 29.0534 5.02333 28.8224 4.85682 28.5551C4.69031 28.2878 4.57938 27.9897 4.53066 27.6785C4.48194 27.3674 4.49642 27.0496 4.57324 26.7442C4.65006 26.4388 4.78765 26.152 4.97778 25.9009C5.16791 25.6499 5.40669 25.4397 5.67985 25.283C5.95302 25.1263 6.25497 25.0262 6.56767 24.9888C6.88036 24.9514 7.1974 24.9773 7.49983 25.0652C7.80227 25.153 8.0839 25.3009 8.32791 25.5L44.8123 53.125C46.3105 54.2434 48.1301 54.8476 49.9998 54.8476C51.8694 54.8476 53.689 54.2434 55.1873 53.125L91.6716 25.5C91.9157 25.3009 92.1973 25.153 92.4997 25.0652C92.8022 24.9773 93.1192 24.9514 93.4319 24.9888C93.7446 25.0262 94.0465 25.1263 94.3197 25.283C94.5929 25.4397 94.8316 25.6499 95.0218 25.9009C95.2119 26.152 95.3495 26.4388 95.4263 26.7442C95.5031 27.0496 95.5176 27.3674 95.4689 27.6785C95.4202 27.9897 95.3092 28.2878 95.1427 28.5551C94.9762 28.8224 94.7576 29.0534 94.4998 29.2343L58.0154 56.8281C55.7051 58.5665 52.8911 59.5045 49.9998 59.5Z"
          fill="#38B7FF"></path>
        <path
          d="M6.51565 76.7813C6.0403 76.782 5.57597 76.6382 5.18427 76.3689C4.79258 76.0995 4.49204 75.7175 4.32253 75.2734C4.15303 74.8292 4.12257 74.3441 4.2352 73.8823C4.34783 73.4205 4.59822 73.0038 4.95315 72.6876L33.7032 47.047C34.1673 46.6326 34.777 46.4195 35.3982 46.4547C36.0194 46.4898 36.6013 46.7703 37.0157 47.2345C37.4301 47.6986 37.6431 48.3083 37.6079 48.9296C37.5728 49.5508 37.2923 50.1326 36.8282 50.547L8.07815 76.1876C7.6512 76.5761 7.09285 76.7882 6.51565 76.7813ZM93.4844 76.7813C92.9072 76.7882 92.3489 76.5761 91.9219 76.1876L63.1719 50.547C62.7078 50.1326 62.4273 49.5508 62.3921 48.9296C62.3569 48.3083 62.57 47.6986 62.9844 47.2345C63.3988 46.7703 63.9806 46.4898 64.6018 46.4547C65.223 46.4195 65.8328 46.6326 66.2969 47.047L95.0313 72.6876C95.3862 73.0038 95.6366 73.4205 95.7492 73.8823C95.8619 74.3441 95.8314 74.8292 95.6619 75.2734C95.4924 75.7175 95.1919 76.0995 94.8002 76.3689C94.4085 76.6382 93.9441 76.782 93.4688 76.7813H93.4844Z"
          fill="#38B7FF"></path>
      </svg>
      <h3 class="text-base capitalize  font-black text-white sm:text-[28px]">email</h3>
      <p class="text-sm text-center font-regular text-[#A4A4A5] sm:text-xl  "><a target="_blank"
          href="mailto:ax.abdo.syrain@gmail.com">Email me</a></p>
    </div>
  </div>
</section>

Related Examples

Contact us form with map
Contact us form with map

Chithira Kumar M

2 years ago

13k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Walid Ahmad

2 years ago

4.3k
home
html , css

Hacker Development

1 year ago

2.4k
Contact Us / Enquiry-form Responsive

KULDEEP

1 year ago

2.2k
Contact us Form with Responsive

KULDEEP

1 year ago

1.2k
landing page

JUGENDRA GANGWAR

2 months ago

190
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.6k
Simple card layout with image

Leon Bachmann

3 years ago

11.3k
User profile card

Mr Robot

3 years ago

12k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Quentin Rivers

2 years ago

3.8k
Contact Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Homayoun

1 year ago

1.5k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k