These components can be used in footer and contact pages to showcase your social/ company cards 😎

Amazon Store Button

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  />
</head>

<div class="h-screen bg-sky-300 px-6 pt-10">
  <h1 class="font-bold text-blue-800">
    These store buttons are clones and store images are taken from font-awesome
    (no copyright issue 🙌)
  </h1>
  <div
    class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
  >
    <div class="mt-8">
      <div>
        <button
          class="flex flex-row items-center gap-4 rounded-md border-transparent bg-white px-6 py-3 text-base font-medium shadow"
        >
          <span>
            <i class="fa-brands fa-amazon text-4xl"></i>
          </span>
          <a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer">
            <p class="text-xs font-bold">Download on the</p>
            <p class="text-lg">Amazon.com</p>
          </a>
        </button>
      </div>
      <div class="py-4">
        <button
          class="flex flex-row items-center gap-4 rounded-md border-transparent bg-black px-6 py-3 text-base font-medium shadow"
        >
          <span>
            <i class="fa-brands fa-amazon text-4xl text-white"></i>
          </span>
          <a
            class="block text-white"
            href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
          >
            <p class="text-xs font-bold">Download on the</p>
            <p class="text-lg">Amazon.com</p>
          </a>
        </button>
      </div>
    </div>
  </div>
</div>

Google Store Button

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  />
</head>

<div class="h-screen bg-sky-300 px-6 pt-10">
  <h1 class="font-bold text-blue-800">
    These store buttons are clones and store images are taken from font-awesome
    (no copyright issue 🙌)
  </h1>
  <div
    class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
  >
    <div class="mt-8">
      <div>
        <button
          class="flex flex-row items-center gap-4 rounded-md border-transparent bg-white px-6 py-3 text-base font-medium shadow"
        >
          <span>
            <i class="fa-brands fa-google-play text-4xl"></i>
          </span>
          <a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer">
            <p class="text-xs font-bold">Download on the</p>
            <p class="text-md">Google Play</p>
          </a>
        </button>
      </div>
      <div class="py-4">
        <button
          class="flex flex-row items-center gap-4 rounded-md border-transparent bg-black px-6 py-3 text-base font-medium shadow"
        >
          <span>
            <i class="fa-brands fa-google-play text-4xl text-white"></i>
          </span>
          <a
            class="block text-white"
            href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
          >
            <p class="text-xs font-bold">Download on the</p>
            <p class="text-md">Google Play</p>
          </a>
        </button>
      </div>
    </div>
  </div>
</div>

Windows Store Button

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  />
</head>

<div class="h-screen bg-sky-300 px-6 pt-10">
  <h1 class="font-bold text-blue-800">
    These store buttons are clones and store images are taken from font-awesome
    (no copyright issue 🙌)
  </h1>
  <div
    class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
  >
    <div class="mt-8">
      <div>
        <button
          class="flex flex-row items-center gap-4 rounded-md border-transparent bg-white px-6 py-3 text-base font-medium shadow"
        >
          <span>
            <i class="fa-brands fa-windows text-4xl"></i>
          </span>
          <a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer">
            <p class="text-xs font-bold">Download on the</p>
            <p class="text-sm">Windows Store</p>
          </a>
        </button>
      </div>
      <div class="py-4">
        <button
          class="flex flex-row items-center gap-4 rounded-md border-transparent bg-black px-6 py-3 text-base font-medium shadow"
        >
          <span>
            <i class="fa-brands fa-windows text-4xl text-white"></i>
          </span>
          <a
            class="block text-white"
            href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer"
          >
            <p class="text-xs font-bold">Download on the</p>
            <p class="text-sm">Windows Store</p>
          </a>
        </button>
      </div>
    </div>
  </div>
</div>

Apple Store Button

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<div class="h-screen bg-sky-300 px-6 pt-10">
  <h1 class="font-bold text-blue-800">
    These store buttons are clones and store images are taken from font-awesome
    (no copyright issue 🙌)
  </h1>
<div class="pt-5 px-10">
  <a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="w-max bg-white rounded-md px-8 py-4 flex gap-5 hover:bg-slate-100">
    <i class="text-5xl text-black fa-brands fa-apple"></i>
    <span class="text-start font-bold">Download on the<br><span class="font-normal text-xl">App Store</span></p>
  </a>
</div>
<div class="pt-5 px-10">
  <a href="https://tailwindcsscomponents.vercel.app/" target="_blank" rel="noreferrer" class="w-max rounded-md bg-black px-8 py-4 flex gap-5 hover:bg-slate-800">
    <i class="text-5xl text-white fa-brands fa-apple"></i>
    <span class="text-start text-white font-bold">Download on the<br><span class="font-normal text-xl">App Store</span></p>
  </a>
</div>
</div>