Home
KULDEEP
Attractive Feature Section

Attractive Feature Section

With Gradient Color 6 Features

This tailwind example is contributed by KULDEEP, on 11-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Frequently asked questions, QnA,Services,Why choose us,Service rates, Subscription plans

FAQ Feature showcase Pricing Other Gradient

Author KULDEEP

710

Fork Fullscreen

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      
      <div
        class="group relative bg-dark-800 rounded-xl p-8 border border-dark-700 hover:border-primary-500 transition-all duration-300 hover:shadow-glow overflow-hidden">
        <div
          class="absolute -inset-1 bg-gradient-to-r from-neon-pink to-primary-500 opacity-0 group-hover:opacity-20 blur-md transition-opacity duration-300">
        </div>
        <div class="relative z-10">
          <div class="w-14 h-14 rounded-lg bg-dark-700 flex items-center justify-center mb-6 shadow-glow-pink">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-neon-pink" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3">Dynamic Interfaces</h3>
          <p class="text-gray-400">Our interfaces adapt in real-time to user behavior, creating a personalized
            experience that evolves with you.</p>
          <div class="mt-6 pt-6 border-t border-dark-700">
            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-dark-700 text-neon-pink">Interactive</span>
          </div>
        </div>
      </div>

<div
        class="group relative bg-dark-800 rounded-xl p-8 border border-dark-700 hover:border-primary-500 transition-all duration-300 hover:shadow-glow overflow-hidden">
        <div
          class="absolute -inset-1 bg-gradient-to-r from-primary-500 to-neon-blue opacity-0 group-hover:opacity-20 blur-md transition-opacity duration-300">
        </div>
        <div class="relative z-10">
          <div class="w-14 h-14 rounded-lg bg-dark-700 flex items-center justify-center mb-6 shadow-glow-blue">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-neon-blue" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3">Holographic Elements</h3>
          <p class="text-gray-400">Next-gen holographic UI components that appear to float above the screen with depth
            and dimension.</p>
          <div class="mt-6 pt-6 border-t border-dark-700">
            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-dark-700 text-neon-blue">3D Effect</span>
          </div>
        </div>
      </div>

<div
        class="group relative bg-dark-800 rounded-xl p-8 border border-dark-700 hover:border-primary-500 transition-all duration-300 hover:shadow-glow overflow-hidden">
        <div
          class="absolute -inset-1 bg-gradient-to-r from-neon-purple to-neon-pink opacity-0 group-hover:opacity-20 blur-md transition-opacity duration-300">
        </div>
        <div class="relative z-10">
          <div class="w-14 h-14 rounded-lg bg-dark-700 flex items-center justify-center mb-6 shadow-glow-pink">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-neon-purple" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3">Biometric Integration</h3>
          <p class="text-gray-400">Seamless biometric authentication flows that blend security with elegant visual
            feedback.</p>
          <div class="mt-6 pt-6 border-t border-dark-700">
            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-dark-700 text-neon-purple">Secure</span>
          </div>
        </div>
      </div>

<div
        class="group relative bg-dark-800 rounded-xl p-8 border border-dark-700 hover:border-primary-500 transition-all duration-300 hover:shadow-glow overflow-hidden">
        <div
          class="absolute -inset-1 bg-gradient-to-r from-neon-blue to-neon-purple opacity-0 group-hover:opacity-20 blur-md transition-opacity duration-300">
        </div>
        <div class="relative z-10">
          <div class="w-14 h-14 rounded-lg bg-dark-700 flex items-center justify-center mb-6 shadow-glow-blue">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-neon-blue" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3">AI-Generated Art</h3>
          <p class="text-gray-400">Unique, algorithmically generated artwork that creates a one-of-a-kind visual
            experience for each user.</p>
          <div class="mt-6 pt-6 border-t border-dark-700">
            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-dark-700 text-neon-blue">Unique</span>
          </div>
        </div>
      </div>

<div
        class="group relative bg-dark-800 rounded-xl p-8 border border-dark-700 hover:border-primary-500 transition-all duration-300 hover:shadow-glow overflow-hidden">
        <div
          class="absolute -inset-1 bg-gradient-to-r from-primary-500 to-neon-purple opacity-0 group-hover:opacity-20 blur-md transition-opacity duration-300">
        </div>
        <div class="relative z-10">
          <div class="w-14 h-14 rounded-lg bg-dark-700 flex items-center justify-center mb-6 shadow-glow">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary-500" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3">Responsive Animations</h3>
          <p class="text-gray-400">Silky smooth animations that respond to device orientation, touch pressure, and
            ambient light conditions.</p>
          <div class="mt-6 pt-6 border-t border-dark-700">
            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-dark-700 text-primary-500">Fluid</span>
          </div>
        </div>
      </div>

<div
        class="group relative bg-dark-800 rounded-xl p-8 border border-dark-700 hover:border-primary-500 transition-all duration-300 hover:shadow-glow overflow-hidden">
        <div
          class="absolute -inset-1 bg-gradient-to-r from-neon-pink to-neon-blue opacity-0 group-hover:opacity-20 blur-md transition-opacity duration-300">
        </div>
        <div class="relative z-10">
          <div class="w-14 h-14 rounded-lg bg-dark-700 flex items-center justify-center mb-6 shadow-glow-pink">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-neon-pink" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-3">Dark Mode First</h3>
          <p class="text-gray-400">Designed from the ground up for dark environments with carefully calibrated contrast
            ratios and eye comfort.</p>
          <div class="mt-6 pt-6 border-t border-dark-700">
            <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-dark-700 text-neon-pink">Eye Care</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.3k
Services

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

10 months ago

1.9k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

Author:
SHARIFUL ISLAM

9 months ago

1.1k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

9 months ago

1.7k
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

9 months ago

1.6k
color blur
blur

Author:
BocchiChan

9 months ago

1.3k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

9 months ago

937
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

8 months ago

1.6k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

7 months ago

1.2k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

7 months ago

904
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

7 months ago

1.1k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

7 months ago

509

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components