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

566

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

404 Page Not Found

Author:
KULDEEP

3 months ago

690
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

516
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Author:
Kennedy Mills

2 years ago

12.8k
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

11 months ago

1.3k
Accordion FAQ

Author:
Nikola Małecka

9 months ago

917
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

3 months ago

971
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

16.5k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

7 months ago

402
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

5 months ago

399
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

4 months ago

373
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.3k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

3 months ago

404

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components