Home
ORGIN_DREAMS
The future ai

The future ai

The is technology

This tailwind example is contributed by ORGIN_DREAMS, on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans,Author box, User information,endorsement,review

Hero Pricing Profile Testimonial

Author ORGIN_DREAMS

303

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Next-Gen AI Solutions</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css" rel="stylesheet">

@keyframes pulse-slow {
      0%, 100% {
        opacity: 0.4;
        transform: scale(1);
      }
      50% {
        opacity: 0.8;
        transform: scale(1.1);
      }
    }

@keyframes fade-in {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

@keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

.animate-text-glow {
      animation: text-glow 3s ease-in-out infinite;
    }

.animate-pulse-slow {
      animation: pulse-slow 6s ease-in-out infinite;
    }

.animate-fade-in {
      animation: fade-in 1s ease-out forwards;
    }

.floating-object {
      animation: float 5s ease-in-out infinite;
    }
  </style>
</head>

<section class="pt-32 pb-20 px-6 md:px-12 max-w-7xl mx-auto">
    <div class="flex flex-col lg:flex-row items-center gap-16 animate-fade-in">
      
      <div class="lg:w-1/2 space-y-6">
        <div class="inline-block px-4 py-1 rounded-full bg-black/20 text-sm font-medium animate-pulse">
          <span class="text-pink-400 font-semibold">✨ New Release</span>
        </div>
        <h1 class="text-5xl md:text-6xl font-extrabold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-yellow-400 animate-text-glow">
          Next-Gen AI Solutions
        </h1>
        <p class="text-lg md:text-xl text-slate-300 max-w-2xl">
          Supercharge your workflow with real-time AI that adapts, learns, and grows with your business.
        </p>
        <div class="flex flex-wrap gap-4">
          <button class="px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-violet-600 text-white font-bold shadow-lg hover:scale-105 transition duration-300 ease-in-out">
            🚀 Get Started
          </button>
          <button class="px-8 py-4 rounded-full border border-slate-600 text-white hover:border-white transition duration-300 flex items-center space-x-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M4.5 3.5L15 10L4.5 16.5V3.5Z" /></svg>
            <span>Watch Demo</span>
          </button>
        </div>
      </div>

<div class="lg:w-1/2 relative group">
        <img src="https://images.unsplash.com/photo-1625314868143-20e93ce3ff33?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
             class="w-full max-w-lg rounded-xl shadow-2xl floating-object" />
        <div class="absolute -top-16 -left-16 w-40 h-40 rounded-full bg-purple-500/30 blur-3xl animate-pulse-slow"></div>
        <div class="absolute -bottom-12 -right-12 w-36 h-36 rounded-full bg-pink-500/30 blur-3xl animate-pulse-slow"></div>
      </div>
    </div>
  </section>

<section class="px-6 py-20 md:px-12 max-w-7xl mx-auto">
    <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Why Choose Our AI?</h2>
    <div class="grid md:grid-cols-3 gap-8 text-center">
      <div class="bg-slate-800 p-6 rounded-xl shadow hover:shadow-xl transition">
        <h3 class="text-xl font-semibold mb-2">Real-Time Analysis</h3>
        <p class="text-slate-400">Process live data and get instant insights with zero latency.</p>
      </div>
      <div class="bg-slate-800 p-6 rounded-xl shadow hover:shadow-xl transition">
        <h3 class="text-xl font-semibold mb-2">Autonomous Learning</h3>
        <p class="text-slate-400">Our AI adapts to your environment and improves itself over time.</p>
      </div>
      <div class="bg-slate-800 p-6 rounded-xl shadow hover:shadow-xl transition">
        <h3 class="text-xl font-semibold mb-2">Scalable & Secure</h3>
        <p class="text-slate-400">Designed for enterprise-level growth with end-to-end encryption.</p>
      </div>
    </div>
  </section>

<section class="px-6 py-20 bg-slate-800/30 backdrop-blur-md">
    <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">What Our Users Say</h2>
    <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto">
      <div class="bg-slate-900 p-6 rounded-xl shadow-md hover:shadow-xl transition">
        <p class="italic text-slate-300">"This AI changed the way we do business. It's like having a full-time analyst on speed!"</p>
        <div class="mt-4 text-right text-sm text-pink-400">– Jane M., CEO</div>
      </div>
      <div class="bg-slate-900 p-6 rounded-xl shadow-md hover:shadow-xl transition">
        <p class="italic text-slate-300">"The seamless integration and smart automation is unlike anything we've seen before."</p>
        <div class="mt-4 text-right text-sm text-purple-400">– Carlos T., Product Manager</div>
      </div>
      <div class="bg-slate-900 p-6 rounded-xl shadow-md hover:shadow-xl transition">
        <p class="italic text-slate-300">"From customer support to logistics—this tool saves us hours every day."</p>
        <div class="mt-4 text-right text-sm text-blue-400">– Anika R., Operations Lead</div>
      </div>
    </div>
  </section>

<section class="px-6 py-20 text-center bg-gradient-to-tr from-violet-800 to-fuchsia-700">
    <h2 class="text-4xl font-bold mb-4 text-white">Ready to Transform Your Workflow?</h2>
    <p class="text-lg text-pink-100 mb-8">Join hundreds of businesses already using NextGen AI.</p>
    <a href="#" class="px-10 py-4 bg-white text-black font-semibold rounded-full shadow hover:bg-slate-200 transition">Start Your Free Trial</a>
  </section>

</body>
</html>

Related Examples

Testimonial card with image

Author:
Simon Scheffer

2 years ago

11.7k
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.3k
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.5k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.9k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.6k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

1.9k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

1 year ago

2.6k
Portfolio Hero Section 4

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

9 months ago

3.2k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

7 months ago

1.5k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

6 months ago

1.2k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

6 months ago

1.3k
Landing page

Author:
Maxim

5 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components