Join Our Community Banner

Encourage users to become members of a community.

This tailwind example is contributed by Diego Chavez, on 04-Oct-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Banner Call to Action

Author Diego Chavez

Tailwind v3.4 9k 15

Fork Fullscreen

<div class="bg-white">
  <div class="mx-auto py-16 sm:px-6 lg:px-8">
    <div class="relative isolate overflow-hidden px-6 py-24 text-center sm:rounded-3xl sm:px-16">
      <h2 class="font-nudge-extrabold mx-auto max-w-2xl text-3xl font-bold uppercase tracking-wide sm:text-4xl">Join our
        community now</h2>
      <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">Experience the benefits of our community. No
        obligations, just join and explore.</p>
      <div class="isolate mt-8 flex items-center justify-center -space-x-2 overflow-hidden">
        <img class="relative z-30 inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/34.jpg" alt="">
        <img class="relative z-20 inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
        <img class="relative z-10 inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/3.jpg" alt="">
        <img class="relative z-0 inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/4.jpg" alt="">
        <span class="!ml-2 font-bold italic text-teal-500">Join these awesome members</span>
      </div>
      <div class="mt-12 flex items-center justify-center gap-x-6">
        <button type="button" class="text-md relative inline-flex items-center gap-x-2 rounded-lg bg-teal-600 px-6 py-4 font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">
          <span class="absolute -top-5 left-0 w-full text-left text-xs italic text-teal-600">No Obligations</span>Join Now
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="-mr-0.5 h-5 w-5">
            <path fill-rule="evenodd" d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
      <svg viewBox="0 0 1024 1024"
        class="absolute left-1/2 top-1/2 -z-10 h-[72rem] w-[72rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
        aria-hidden="true">
        <circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7"></circle>
        <defs>
          <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
            <stop stop-color="#15b8a6"></stop>
            <stop offset="1" stop-color="#15b8a6"></stop>
          </radialGradient>
        </defs>
      </svg>
    </div>
  </div>
</div>

Related Examples

Call to action section

Odessa Young

3 years ago

13.5k
CTA banner
Capture the attention of the user with full-width CTA Section

Anonymous

2 years ago

5.1k
Call to action

Leon Bachmann

3 years ago

10.4k
Subscribe to our newsletter section

Conan Hilton

4 years ago

12k
Call to example
Call to example using radial-gradient

Oliver Hansen

3 years ago

9.6k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Pixel Perfect

2 years ago

2.1k
Call to Action Box

Aitrik Saha

1 year ago

2.1k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Banshee

1 year ago

3.5k
Very simple hero

Laurits

3 years ago

9.7k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
Food App Web design

Aitrik Saha

1 year ago

2.5k
Call ya
Simple Call-to-Action

Matti

1 year ago

1.6k