Tailwind CSS CTA Block with Engaging User Avatars
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CSS CTA Block</title>
</head>
<body>
<section class="w-full flex bg-gray-50">
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div class="text-center space-y-5">
<h2 class="text-base font-semibold text-pink-400 tracking-wide uppercase">Get started now</h2>
<div class="inline-flex items-end justify-center w-full text-center mx-auto">
<img src="https://randomuser.me/api/portraits/men/47.jpg"
class="absolute transform translate-x-24 ml-6 rounded-full w-12 h-12 md:w-16 md:h-16 border-4 border-white">
<img src="https://randomuser.me/api/portraits/men/49.jpg"
class="absolute transform -translate-x-24 -ml-6 rounded-full w-12 h-12 md:w-16 md:h-16 border-4 border-white">
<img src="https://randomuser.me/api/portraits/women/46.jpg"
class="absolute transform -translate-x-16 rounded-full w-16 h-16 md:w-20 md:h-20 border-4 border-white">
<img src="https://randomuser.me/api/portraits/men/48.jpg"
class="absolute transform translate-x-16 rounded-full w-16 h-16 md:w-20 md:h-20 border-4 border-white">
<img src="https://randomuser.me/api/portraits/women/43.jpg"
class="rounded-full w-20 h-20 md:w-24 md:h-24 border-4 border-white relative">
</div>
<p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">Discover
your
potential
<span class="px-2 py-1 relative inline-block">
<svg class="stroke-current bottom-0 absolute text-rose-300 -translate-x-2" viewBox="0 0 410 18"
xmlns="http://www.w3.org/2000/svg">
<path d="M6 6.4c16.8 16.8 380.8-11.2 397.6 5.602" stroke-width="12" fill="none"
fill-rule="evenodd" stroke-linecap="round"></path>
</svg>
<span class="relative">with us</span>
</span>
</p>
<p class="max-w-3xl mt-5 mx-auto text-xl text-gray-500">
Sign up now and experience the difference in just
one week
</p>
<div class="flex flex-col sm:flex-row space-y-2.5 sm:space-y-0 sm:space-x-2.5 items-center justify-center">
<!-- Sign up with Email -->
<a href="#" class="w-full sm:w-auto">
<button type="button"
class="flex items-center justify-center px-4 py-3 w-full shadow-sm font-medium rounded-full border border-rose-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-200 transition duration-250 ease-in-out">
<span class="text-base">Sign up with Email</span>
</button>
</a>
<!-- Sign up with Google -->
<a href="#" class="w-full sm:w-auto sm:mt-0 mt-2 sm:ml-0 ml-2">
<button type="button"
class="flex items-center justify-center gap-4 px-4 py-3 w-full border border-rose-400 shadow-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-200 transition duration-250 ease-in-out">
<!-- Google Logo -->
<svg class="w-6" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-0.5 0 48 48" version="1.1">
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Color-" transform="translate(-401.000000, -860.000000)">
<g id="Google" transform="translate(401.000000, 860.000000)">
<path
d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24"
id="Fill-1" fill="#FBBC05">
</path>
<path
d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333"
id="Fill-2" fill="#EB4335">
</path>
<path
d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667"
id="Fill-3" fill="#34A853">
</path>
<path
d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24"
id="Fill-4" fill="#4285F4">
</path>
</g>
</g>
</g>
</svg>
<span class="text-base">Sign up with Google</span>
</button>
</a>
</div>
</div>
</div>
</section>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet showcases a modern and impactful Call-to-Action (CTA) block designed to drive conversions by leveraging social proof with engaging user avatars. It provides a clear and compelling prompt for user action within a responsive layout.
Key Features:
- Responsive Design: The CTA block adapts fluidly to different screen sizes, ensuring optimal viewing and interaction on desktops, tablets, and mobile devices.
- Engaging User Avatars (Social Proof): Integrates a collection of user avatars to create a sense of community, trust, and social validation, encouraging new users to engage.
- Clear Call to Action: Features prominent button(s) and a concise message that effectively guides users towards the desired action (e.g., sign-up, learn more, join).
Implementation:
- Include Tailwind CSS: Ensure that Tailwind CSS is installed and properly configured in your project.
- Create the HTML Structure: Define the HTML structure for the CTA block, including a main container, elements for the headline, descriptive text, call-to-action button(s), and a dedicated section for user avatars.
- Integrate User Avatars: Use <img> tags for each avatar, applying Tailwind CSS classes for shaping (e.g., rounded-full), sizing, and positioning (e.g., flex, -ml-).
- Apply Tailwind CSS Classes: Utilize Tailwind CSS utility classes extensively to style the CTA block's background, padding, text, button appearance, and overall layout. Focus on visual hierarchy and alignment.
By following these steps, you can seamlessly integrate a responsive and highly effective CTA block with engaging user avatars into your Tailwind CSS project, fostering trust and driving conversions on your website.
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
