Contact UI Components – Flaro Library

<section class="relative pt-24 pb-36 bg-white overflow-hidden">
  <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/contact/gradient.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <h2 class="mb-5 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">Get connected</h2>
    <p class="mb-20 text-lg text-gray-600 text-center font-medium leading-normal md:max-w-lg mx-auto">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.</p>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/3 p-3">
        <div class="p-11 h-full text-center bg-white bg-opacity-90 border border-blueGray-100 rounded-xl shadow-11xl">
          <div class="mb-6 relative mx-auto w-16 h-16 bg-indigo-600 rounded-full">
            <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2">
              <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 11.1666L14.5208 18.1805C15.4165 18.7776 16.5835 18.7776 17.4792 18.1805L28 11.1666M6.66667 25.8333H25.3333C26.8061 25.8333 28 24.6394 28 23.1666V9.83329C28 8.36053 26.8061 7.16663 25.3333 7.16663H6.66667C5.19391 7.16663 4 8.36053 4 9.83329V23.1666C4 24.6394 5.19391 25.8333 6.66667 25.8333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
          <h3 class="mb-3 text-xl font-bold font-heading leading-snug">Send Email</h3>
          <p class="font-medium leading-relaxed">info@mail.com</p>
          <p class="font-medium leading-relaxed">support@mail.com</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="p-11 h-full text-center bg-white bg-opacity-90 border border-blueGray-100 rounded-xl shadow-11xl">
          <div class="mb-6 relative mx-auto w-16 h-16 bg-white border border-blueGray-200 rounded-full">
            <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2">

<section class="has-background-light py-24 is-relative is-clipped">
    <img class="is-absolute is-bottom-0" style="left: 50%; transform: translateX(-50%);" src="flaro-assets/images/contact/gradient.svg" alt="">
    <div class="container px-8">
        <h2 class="mb-5 title is-size-1 has-text-centered has-text-weight-bold">Get connected</h2>
        <p class="mb-20 has-text-grey has-text-centered has-text-weight-medium">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.</p>
        <div class="columns">
            <div class="column is-4">
                <div class="box has-background-white">
                    <div class="mb-6 is-relative mx-auto has-background-link" style="width: 64px; height: 64px; border-radius: 50%;">
                        <div class="is-absolute" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">
                          <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M4 11.1666L14.5208 18.1805C15.4165 18.7776 16.5835 18.7776 17.4792 18.1805L28 11.1666M6.66667 25.8333H25.3333C26.8061 25.8333 28 24.6394 28 23.1666V9.83329C28 8.36053 26.8061 7.16663 25.3333 7.16663H6.66667C5.19391 7.16663 4 8.36053 4 9.83329V23.1666C4 24.6394 5.19391 25.8333 6.66667 25.8333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                        </div>
                    </div>
                    <h3 class="mb-3 has-text-weight-bold has-text-centered has-text-dark is-size-4">Send Email</h3>
                    <p class="has-text-weight-medium has-text-centered has-text-dark">info@mail.com</p>
                    <p class="has-text-weight-medium has-text-centered has-text-dark">support@mail.com</p>
                </div>
            </div>
            <div class="column is-4">
                <div class="box has-background-white">
                    <div class="mb-6 is-relative mx-auto has-background-white" style="width: 64px; height: 64px; border-radius: 50%; border: 1px solid #d8d5d5;">
                        <div class="is-absolute" style="left: 50%; top: 50%; transform: translate(-50%, -50%);">

<section class="py-12 py-sm-24 pb-md-32 bg-info-light position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0 ms-20" src="flaro-assets/images/contact/gradient.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-xl mb-20 mx-auto text-center">
      <h2 class="mb-5" >Get connected</h2>
      <p class="fs-7 text-secondary" >Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.</p>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 mb-8 mb-lg-0">
        <div class="mw-md mx-auto py-12 px-8 bg-white rounded-4 text-center shadow-lg">
          <div class="d-flex mb-6 mx-auto align-items-center justify-content-center bg-primary rounded-pill" style="width: 70px; height: 70px;">
            <svg width="26" height="21" viewbox="0 0 26 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 5.16663L11.5208 12.1805C12.4165 12.7776 13.5835 12.7776 14.4792 12.1805L25 5.16663M3.66667 19.8333H22.3333C23.8061 19.8333 25 18.6394 25 17.1666V3.83329C25 2.36053 23.8061 1.16663 22.3333 1.16663H3.66667C2.19391 1.16663 1 2.36053 1 3.83329V17.1666C1 18.6394 2.19391 19.8333 3.66667 19.8333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h6 class="fs-6" >Send Email</h6><span class="d-block" >info@mail.com</span><span >support@mail.com</span>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-8 mb-lg-0">
        <div class="mw-md mx-auto py-12 px-8 bg-white rounded-4 text-center shadow-lg">
          <div class="d-flex mb-6 mx-auto align-items-center justify-content-center bg-white border rounded-pill" style="width: 70px; height: 70px;">
            <svg width="26" height="27" viewbox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 4.16667C1 2.69391 2.19391 1.5 3.66667 1.5H8.03899C8.61289 1.5 9.12241 1.86724 9.3039 2.4117L11.301 8.40295C11.5108 9.03243 11.2258 9.72041 10.6324 10.0172L7.62268 11.522C9.09233 14.7816 11.7184 17.4077 14.978 18.8773L16.4828 15.8676C16.7796 15.2742 17.4676 14.9892 18.0971 15.199L24.0883 17.1961C24.6328 17.3776 25 17.8871 25 18.461V22.8333C25 24.3061 23.8061 25.5 22.3333 25.5H21C9.95431 25.5 1 16.5457 1 5.5V4.16667Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>