Contact Section

<div class="py-12 px-6">
  <h2 class="ff-s fs-3xl fw-600 tc-slate-10 mb-6">Contact us</h2>
  <div class="d-g gtc-1 sm:gtc-3 g-6">
    <div class="p-6 b-1 bc-silver-4 rad-0">
      <div class="d-f ai-c jc-c d-10 rad-9 b-1 bc-silver-4 tc-slate mb-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-5 h-5"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <path
            d="M224,200v8a32,32,0,0,1-32,32H136"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M224,128H192a16,16,0,0,0-16,16v40a16,16,0,0,0,16,16h32V128a96,96,0,1,0-192,0v56a16,16,0,0,0,16,16H64a16,16,0,0,0,16-16V144a16,16,0,0,0-16-16H32"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
      </div>
      <h3 class="ff-s fs-md fw-600 tc-slate-10 mb-1">Live Chat</h3>
      <p class="fs-sm tc-silver-10 m-0">Chat with us in real-time</p>
    </div>
    <div class="p-6 b-1 bc-silver-4 rad-0">
      <div class="d-f ai-c jc-c d-10 rad-9 b-1 bc-silver-4 tc-slate mb-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-5 h-5"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <circle
            cx="128"
            cy="128"
            r="40"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M184,208c-15.21,10.11-36.37,16-56,16a96,96,0,1,1,96-96c0,22.09-8,40-28,40s-28-17.91-28-40V88"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
      </div>
      <h3 class="ff-s fs-md fw-600 tc-slate-10 mb-1">Email</h3>
      <p class="fs-sm tc-silver-10 m-0">company@example.com</p>
    </div>
    <div class="p-6 b-1 bc-silver-4 rad-0">
      <div class="d-f ai-c jc-c d-10 rad-9 b-1 bc-silver-4 tc-slate mb-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-5 h-5"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <line
            x1="56"
            y1="232"
            x2="200"
            y2="232"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <circle
            cx="128"
            cy="104"
            r="32"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M208,104c0,72-80,128-80,128S48,176,48,104a80,80,0,0,1,160,0Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
      </div>
      <h3 class="ff-s fs-md fw-600 tc-slate-10 mb-1">Office</h3>
      <p class="fs-sm tc-silver-10 m-0">123 Main St, City</p>
    </div>
  </div>
</div>

<div class="py-12 px-6">
  <div class="d-f fw-w g-12">
    <div class="f-1 min-w-64">
      <h2 class="ff-s fs-3xl fw-600 tc-slate-10 mb-2">Contact us</h2>
      <p class="fs-md tc-silver-10 mb-6 m-0">We'd love to hear from you. Reach out anytime.</p>
      <div class="d-f fd-c g-4">
        <div class="d-f ai-c g-3">
          <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate-9">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-5 h-5"
              viewBox="0 0 256 256"
              aria-hidden="true"
            >
              <rect width="256" height="256" fill="none" />
              <path
                d="M224,200v8a32,32,0,0,1-32,32H136"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              />
              <path
                d="M224,128H192a16,16,0,0,0-16,16v40a16,16,0,0,0,16,16h32V128a96,96,0,1,0-192,0v56a16,16,0,0,0,16,16H64a16,16,0,0,0,16-16V144a16,16,0,0,0-16-16H32"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              />
            </svg>
          </div>
          <div>
            <p class="fs-sm fw-600 tc-slate-9 m-0">Live Chat</p>
            <p class="fs-sm tc-silver-10 m-0">Chat with us in real-time</p>
          </div>
        </div>
        <div class="d-f ai-c g-3">
          <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate-9">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-5 h-5"
              viewBox="0 0 256 256"
              aria-hidden="true"
            >
              <rect width="256" height="256" fill="none" />
              <circle
                cx="128"
                cy="128"
                r="40"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              />
              <path
                d="M184,208c-15.21,10.11-36.37,16-56,16a96,96,0,1,1,96-96c0,22.09-8,40-28,40s-28-17.91-28-40V88"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              />
            </svg>
          </div>
          <div>
            <p class="fs-sm fw-600 tc-slate-9 m-0">Email</p>
            <p class="fs-sm tc-silver-10 m-0">company@example.com</p>
          </div>
        </div>
        <div class="d-f ai-c g-3">
          <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate-9">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-5 h-5"
              viewBox="0 0 256 256"
              aria-hidden="true"
            >
              <rect width="256" height="256" fill="none" />
              <line
                x1="56"
                y1="232"
                x2="200"
                y2="232"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              />
              <circle
                cx="128"
                cy="104"
                r="32"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              />
              <path
                d="M208,104c0,72-80,128-80,128S48,176,48,104a80,80,0,0,1,160,0Z"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
              />
            </svg>
          </div>
          <div>
            <p class="fs-sm fw-600 tc-slate-9 m-0">Address</p>
            <p class="fs-sm tc-silver-10 m-0">123 Main St, City, Country</p>
          </div>
        </div>
      </div>
    </div>
    <div class="f-1 min-w-64">
      <form class="d-f fd-c g-4">
        <div class="d-f fd-c g-1">
          <label class="fs-sm fw-600 tc-slate-9">Name</label>
          <input type="text" placeholder="Your name" class="w-full px-3 py-2 b-1 bc-silver-4 rad-0 fs-sm tc-black f:oc-silver-1 f:os-s f:ow-2" />
        </div>
        <div class="d-f fd-c g-1">
          <label class="fs-sm fw-600 tc-slate-9">Email</label>
          <input type="email" placeholder="you@example.com" class="w-full px-3 py-2 b-1 bc-silver-4 rad-0 fs-sm tc-black f:oc-silver-1 f:os-s f:ow-2" />
        </div>
        <div class="d-f fd-c g-1">
          <label class="fs-sm fw-600 tc-slate-9">Message</label>
          <textarea
            placeholder="Your message"
            rows="4"
            class="w-full px-3 py-2 b-1 bc-silver-4 rad-0 fs-sm tc-black f:oc-silver-1 f:os-s f:ow-2 rz-n"
          ></textarea>
        </div>
        <button type="submit" class="px-4 py-2 rad-0 fs-sm fw-600 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Send message</button>
      </form>
    </div>
  </div>
</div>