Home
Arturo Lizana
Floating Action Button

Floating Action Button

This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience.

Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

This tailwind example is contributed by Arturo Lizana, on 06-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner,Social media links,

Call to Action Social media buttons

Author Arturo Lizana

1.4k

4

Fork Fullscreen

<div class="fixed right-5 bottom-10 pb-4 flex flex-col gap-3">

<a
    href="https://api.whatsapp.com/send?phone=337776655"
    target="_blank"
    rel="noopener noreferrer"
    class="flex items-center justify-center w-12 h-12 xs:w-10 xs:h-10 bg-green-500 text-white rounded-full shadow-lg transition-transform hover:scale-110"
  >
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
      <path d="M20.52 3.48A11.92 11.92 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.12 1.6 5.91L0 24l6.27-1.62A11.93 11.93 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.19-1.24-6.18-3.48-8.52zM12 22a9.93 9.93 0 0 1-5.1-1.39l-.36-.21-3.72.96.99-3.63-.24-.37A9.93 9.93 0 0 1 2 12c0-5.52 4.48-10 10-10s10 4.48 10 10-4.48 10-10 10zm5.27-7.05c-.29-.14-1.72-.84-1.98-.94-.27-.1-.47-.14-.66.14-.2.29-.76.94-.93 1.13-.17.2-.34.22-.63.07-.29-.14-1.24-.46-2.37-1.47a8.77 8.77 0 0 1-1.63-2.03c-.17-.29-.02-.45.13-.59.13-.13.29-.34.43-.51.14-.17.2-.29.29-.48.1-.2.05-.37-.02-.51-.07-.14-.66-1.59-.9-2.18-.24-.57-.49-.49-.66-.5h-.56c-.2 0-.52.07-.8.37-.29.29-1.04 1.02-1.04 2.48 0 1.45 1.06 2.85 1.2 3.05.14.2 2.1 3.21 5.09 4.5.71.31 1.26.5 1.69.64.71.22 1.36.19 1.87.12.57-.08 1.72-.7 1.96-1.37.24-.67.24-1.24.17-1.37-.07-.14-.26-.2-.55-.34z" />
    </svg>
  </a>

<a
    href="mailto:contat@exaple.com"
    class="flex items-center justify-center w-12 h-12 xs:w-10 xs:h-10 bg-blue-600 text-white rounded-full shadow-lg transition-transform hover:scale-110"
  >
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
      <path d="M20 4H4C2.897 4 2 4.897 2 6v12c0 1.103.897 2 2 2h16c1.104 0 2-.897 2-2V6c0-1.103-.896-2-2-2zm0 2v.511l-8 5.333-8-5.333V6h16zM4 18V8.489l8 5.333 8-5.333V18H4z" />
    </svg>
  </a>

<a
    href="https://www.instagram.com"
    target="_blank"
    rel="noopener noreferrer"
    class="flex items-center justify-center w-12 h-12 xs:w-10 xs:h-10 bg-gradient-to-r from-pink-500 to-yellow-500 text-white rounded-full shadow-lg transition-transform hover:scale-110"
  >
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 2.2c3.2 0 3.584.012 4.85.07 1.17.054 1.97.24 2.43.403a4.92 4.92 0 0 1 1.78 1.045 4.92 4.92 0 0 1 1.045 1.78c.163.46.35 1.26.403 2.43.058 1.267.07 1.65.07 4.85s-.012 3.584-.07 4.85c-.054 1.17-.24 1.97-.403 2.43a4.92 4.92 0 0 1-1.045 1.78 4.92 4.92 0 0 1-1.78 1.045c-.46.163-1.26.35-2.43.403-1.267.058-1.65.07-4.85.07s-3.584-.012-4.85-.07c-1.17-.054-1.97-.24-2.43-.403a4.92 4.92 0 0 1-1.78-1.045 4.92 4.92 0 0 1-1.045-1.78c-.163-.46-.35-1.26-.403-2.43C2.212 15.784 2.2 15.4 2.2 12s.012-3.584.07-4.85c.054-1.17.24-1.97.403-2.43A4.92 4.92 0 0 1 3.718 2.94 4.92 4.92 0 0 1 5.497 1.895c.46-.163 1.26-.35 2.43-.403C8.416 1.812 8.8 1.8 12 1.8zm0 1.8c-3.14 0-3.5.012-4.73.068-1.02.046-1.575.22-1.94.364a3.12 3.12 0 0 0-1.136.74 3.12 3.12 0 0 0-.74 1.136c-.144.365-.318.92-.364 1.94-.056 1.23-.068 1.59-.068 4.73s.012 3.5.068 4.73c.046 1.02.22 1.575.364 1.94.16.405.404.77.74 1.136.366.336.73.58 1.136.74.365.144.92.318 1.94.364 1.23.056 1.59.068 4.73.068s3.5-.012 4.73-.068c1.02-.046 1.575-.22 1.94-.364a3.12 3.12 0 0 0 1.136-.74 3.12 3.12 0 0 0 .74-1.136c.144-.365.318-.92.364-1.94.056-1.23.068-1.59.068-4.73s-.012-3.5-.068-4.73c-.046-1.02-.22-1.575-.364-1.94a3.12 3.12 0 0 0-.74-1.136 3.12 3.12 0 0 0-1.136-.74c-.365-.144-.92-.318-1.94-.364C15.5 4.012 15.14 4 12 4zm0 3.8a4.2 4.2 0 1 1 0 8.4 4.2 4.2 0 0 1 0-8.4zm0 1.8a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8zm5.6-2.2a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
    </svg>
  </a>
</div>

Related Examples

Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

9 months ago

1.1k
Product review card

Author:
Moriba Traore

3 years ago

15.4k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Author:
Emdadul Islam

1 year ago

2.9k
bottom drawer with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.6k
Buy Me a Coffee CTA section

Author:
Sienna

2 years ago

10k
Basic CTA
Simple and straightforward call to action section

Author:
Dipti narayan

2 years ago

7.8k
CTA - call to action section

Author:
ABDO-SY

10 months ago

994
Call to action block

Author:
Sienna

3 years ago

11.8k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

9 months ago

806
Take a Survey CTA section

Author:
JaxStone

2 years ago

11.2k
Social media icons
'follow us on' buttons

Author:
R.P Ketan

2 years ago

8.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12