<div>
  <h3
    class="
      font-heading
      text-muted-800
      dark:text-white
      font-semibold
      text-xl
      mb-6
    "
  >
    Share this post
  </h3>

  <div class="flex gap-4">
    <!--Facebook button-->
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-4
        px-5
        rounded
        bg-muted-200
        dark:bg-muted-700
        hover:bg-muted-100
        dark:hover:bg-muted-600
        text-muted-600
        dark:text-muted-400
        transition-colors
        duration-300
        cursor-pointer
        tw-accessibility
      "
    >
      <i class="iconify w-4 h-4" data-icon="fa6-brands:facebook-f"></i>
    </button>
    <!--Twitter button-->
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-4
        px-5
        rounded
        bg-muted-200
        dark:bg-muted-700
        hover:bg-muted-100
        dark:hover:bg-muted-600
        text-muted-600
        dark:text-muted-400
        transition-colors
        duration-300
        cursor-pointer
        tw-accessibility
      "
    >
      <i class="iconify w-4 h-4" data-icon="fa6-brands:twitter"></i>
    </button>
    <!--Linkedin button-->
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-4
        px-5
        rounded
        bg-muted-200
        dark:bg-muted-700
        hover:bg-muted-100
        dark:hover:bg-muted-600
        text-muted-600
        dark:text-muted-400
        transition-colors
        duration-300
        cursor-pointer
        tw-accessibility
      "
    >
      <i class="iconify w-4 h-4" data-icon="fa6-brands:linkedin-in"></i>
    </button>
    <!--Mail button-->
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-4
        px-5
        rounded
        bg-muted-200
        dark:bg-muted-700
        hover:bg-muted-100
        dark:hover:bg-muted-600
        text-muted-600
        dark:text-muted-400
        transition-colors
        duration-300
        cursor-pointer
        tw-accessibility
      "
    >
      <i class="iconify w-4 h-4" data-icon="fa6-solid:envelope"></i>
    </button>
  </div>
</div>
