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='bg-gray-50'>
<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">
    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
      <span class="block">Ready to dive in?</span>
      <span class="block text-indigo-600">Start your free trial today.</span>
    </h2>
    <div class='mt-8'>
<div>
<button
class='bg-white font-medium text-base border-transparent px-6 py-3 rounded-md flex flex-row items-center gap-4 shadow'>
<span>
<i class="fa-brands fa-amazon text-4xl"></i>
</span>
<a href='#'>
<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='bg-black font-medium text-base border-transparent px-6 py-3 rounded-md flex flex-row items-center gap-4 shadow'>
<span>
<i class="fa-brands text-white fa-amazon text-4xl"></i>
</span>
<a class='text-white block' href='#'>
<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='bg-gray-50'>
<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">
    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
      <span class="block">Ready to dive in?</span>
      <span class="block text-indigo-600">Start your free trial today.</span>
    </h2>
    <div class='mt-8'>
<div>
<button
class='bg-white font-medium text-base border-transparent px-6 py-3 rounded-md flex flex-row items-center gap-4 shadow'>
<span>
<i class="fa-brands fa-google-play text-4xl"></i>
</span>
<a href='#'>
<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='bg-black font-medium text-base border-transparent px-6 py-3 rounded-md flex flex-row items-center gap-4 shadow'>
<span>
<i class="fa-brands text-white fa-google-play text-4xl"></i>
</span>
<a class='text-white block' href='#'>
<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='bg-gray-50'>
<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">
    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
      <span class="block">Ready to dive in?</span>
      <span class="block text-indigo-600">Start your free trial today.</span>
    </h2>
    <div class='mt-8'>
<div>
<button
class='bg-white font-medium text-base border-transparent px-6 py-3 rounded-md flex flex-row items-center gap-4 shadow'>
<span>
<i class="fa-brands fa-windows text-4xl"></i>
</span>
<a href='#'>
<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='bg-black font-medium text-base border-transparent px-6 py-3 rounded-md flex flex-row items-center gap-4 shadow'>
<span>
<i class="fa-brands text-white fa-windows text-4xl"></i>
</span>
<a class='text-white block' href='#'>
<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="p-5 w-screen bg-slate-400">
<div class="pt-5 px-10">
  <a href="#" 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="#" 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>