Home
Bonimater
Boimator welcoming back

Boimator welcoming back

This tailwind example is contributed by Bonimater, on 09-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner,about me

Call to Action About us

Author Bonimater

608

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Greeting Card</title>
  <style>
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .fade-in-up {
      animation: fadeInUp 0.8s ease forwards;
    }
  </style>
</head>
<body class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 min-h-screen flex items-center justify-center p-4">

<div class="max-w-md bg-white bg-opacity-90 rounded-3xl shadow-xl p-8 text-center fade-in-up">
    <h1 class="text-4xl font-extrabold text-purple-700 mb-4">Welcome Back!</h1>
    <p class="text-gray-700 text-lg mb-6">Hope you’re having a fantastic day. Let’s make it even better with some amazing projects ahead!</p>
    <button
      class="bg-purple-700 hover:bg-purple-800 text-white font-semibold py-3 px-8 rounded-full shadow-lg transition"
      onclick="alert('Have a great day! 😊')"
    >
      Say Hello
    </button>
  </div>

</body>
</html>

Related Examples

Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

11 months ago

1.6k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

9 months ago

1.3k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

1 year ago

2.2k
Sleek & Modern Tailwind CSS Card with Vibrant Gradient
✔ Vibrant Gradient Background 🎨 ✔ Soft Shadows & Hover Scaling ✨ ✔ Dark Mode Friendly 🌙 ✔ Minimalist & Clean UI 💎

Author:
Sachin Kannaujiya

1 year ago

1.3k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

6 months ago

474
Fancy call to action

Author:
Leon Bachmann

3 years ago

10.8k
Clean CTA section

Author:
Pixel Perfect

2 years ago

3.8k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

5 months ago

802
about us simple

Author:
QQ-VVN

10 months ago

709
REGISTER - CTA - SECTION animation

Author:
ABDO-SY

11 months ago

709
YouTube subscription section

Author:
Leif99

3 years ago

14.3k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components