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

322

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

Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

3 months ago

333
Tool Box
by salvator

Author:
Baraka Salvator

4 months ago

603
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

1.9k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

11.6k
Testimonial Section with Gradient Background
The section includes a company logo at the top, a customer testimonial in the center, and the author's name and position at the bottom.

Author:
Elsabe Fourie

1 year ago

7.9k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

13.6k
User Profile Card
Full-page Profile card

Author:
Prashant

3 years ago

18.6k
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

5 months ago

678
Simple pricing cards

Author:
S. Patel

2 years ago

10.7k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.5k
Garden
by salvator

Author:
Baraka Salvator

4 months ago

633
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

8.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components