card section neon

This tailwind example is contributed by Omer fils ELENGA, on 06-Feb-2026. Component is made with Tailwind v3.4. It is responsive.

Header Card Carousel Hero Comment Section Range Slider

Author Omer fils ELENGA

Tailwind v3.4 1.3k 5

Fork Fullscreen

<section class="sm:py-24 grid-corners pt-16 pb-16 relative bg-black" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(7)" id="why">
      <div class="grid-corners-bottom"></div>
      <div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(7) &gt; div:nth-of-type(2)">
        <div class="animate-in mx-auto max-w-3xl text-center">
          <span class="inline-flex items-center gap-1 rounded-full bg-lime-400/10 px-2 py-1 text-[11px] text-lime-300 ring-1 ring-lime-300/20 uppercase tracking-tight">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-3.5 w-3.5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
            Team
          </span>
          <h2 class="sm:text-5xl text-4xl text-lime-300 font-semibold tracking-tight mt-4 karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
            <span class="karaoke-word"></span>
            <span class="karaoke-word">Meet</span>
            <span class="karaoke-word">the</span>
            <span class="karaoke-word">team</span>
            <span class="karaoke-word">that</span>
            <span class="karaoke-word">talks</span>
            <span class="karaoke-word">to</span>
            <span class="karaoke-word">AI</span>
            <span class="karaoke-word">like</span>
            <span class="karaoke-word">it's</span>
            <span class="karaoke-word">a</span>
            <span class="karaoke-word">pet</span>
            <span class="karaoke-word"></span>
          </h2>
          <p class="mx-auto mt-3 max-w-2xl text-neutral-300 text-sm sm:text-base karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
            <span class="karaoke-word"></span>
            <span class="karaoke-word">The</span>
            <span class="karaoke-word">humans</span>
            <span class="karaoke-word">behind</span>
            <span class="karaoke-word">the</span>
            <span class="karaoke-word">models</span>
            <span class="karaoke-word">builders,</span>
            <span class="karaoke-word">dreamers,</span>
            <span class="karaoke-word">and</span>
            <span class="karaoke-word">delightful</span>
            <span class="karaoke-word">nerds.</span>
            <span class="karaoke-word"></span>
          </p>
        </div>

<div class="relative w-full max-w-md h-[500px] flex items-center justify-center">
            <div class="flex transition-transform duration-500 ease-out absolute top-0 right-0 bottom-0 left-0 items-center justify-center" style="transform-style: preserve-3d;" id="carouselTrack">
            <div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="0" style="transform: translateX(-360px) scale(0.85) rotateY(20deg); opacity: 0.4; filter: brightness(0.6); z-index: 2;">
              <img src="https://images.unsplash.com/photo-1611004061856-ccc3cbe944b2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXNxdWV8ZW58MHwwfHx8MTc3MDM2NDAzN3ww&ixlib=rb-4.1.0&q=80&w=1080" alt="Team member" class="h-full w-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div class="absolute bottom-6 left-6 right-6">
                <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
                    <circle cx="9" cy="7" r="4" class=""></circle>
                    <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
                  </svg>
                  <span class="text-white">Growth Lead</span>
                </div>
                <p class="text-xl font-semibold text-white tracking-tight">
                  John Alvarez
                </p>
              </div>
            </div>

<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="1" style="transform: translateX(-180px) scale(0.9) rotateY(10deg); opacity: 0.6; filter: brightness(0.75); z-index: 5;">
              <img src="https://images.unsplash.com/photo-1611004061856-ccc3cbe944b2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXNxdWV8ZW58MHwwfHx8MTc3MDM2NDAzN3ww&ixlib=rb-4.1.0&q=80&w=1080" alt="Team member" class="h-full w-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div class="absolute bottom-6 left-6 right-6">
                <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
                    <path d="M12 8V4H8" class=""></path>
                    <rect width="16" height="12" x="4" y="8" rx="2" class=""></rect>
                    <path d="M2 14h2" class=""></path>
                    <path d="M20 14h2" class=""></path>
                    <path d="M15 13v2" class=""></path>
                    <path d="M9 13v2" class=""></path>
                  </svg>
                  <span class="text-white">AI Lead</span>
                </div>
                <p class="text-xl font-semibold tracking-tight text-white">
                  Jackson Mitchel
                </p>
              </div>
            </div>

<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-2 ring-lime-300/40 bg-lime-400/10 transition-all duration-500" data-index="2" style="transform: translateX(0px) scale(1) rotateY(0deg); opacity: 1; z-index: 10; box-shadow: rgba(163, 230, 53, 0.3) 0px 20px 60px; filter: brightness(1);">
              <img src="https://images.unsplash.com/photo-1611004061856-ccc3cbe944b2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXNxdWV8ZW58MHwwfHx8MTc3MDM2NDAzN3ww&ixlib=rb-4.1.0&q=80&w=1080" alt="Team member" class="h-full w-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent"></div>
              <div class="absolute top-6 right-6">
                <div class="inline-flex items-center gap-1 rounded-full bg-lime-400 px-3 py-1.5 text-xs font-medium text-neutral-950">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
                    <path d="M12 2v20M2 12h20" class=""></path>
                  </svg>
                  Featured
                </div>
              </div>
              <div class="absolute bottom-8 left-8 right-8">
                <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1.5 text-xs ring-1 ring-white/20 backdrop-blur-md mb-4">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
                    <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" class=""></path>
                    <rect width="20" height="14" x="2" y="6" rx="2" class=""></rect>
                  </svg>
                  <span class="text-white">Product Head</span>
                </div>
                <p class="text-3xl font-bold text-white tracking-tight mb-1">
                  Jenny Doe
                </p>
                <p class="text-sm text-neutral-300 karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
                  <span class="karaoke-word"></span>
                  <span class="karaoke-word">Leading</span>
                  <span class="karaoke-word">product</span>
                  <span class="karaoke-word">vision</span>
                  <span class="karaoke-word">&amp;</span>
                  <span class="karaoke-word">strategy</span>
                  <span class="karaoke-word"></span>
                </p>
              </div>
            </div>

<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="3" style="transform: translateX(180px) scale(0.9) rotateY(-10deg); opacity: 0.6; filter: brightness(0.75); z-index: 5;">
              <img src="https://images.unsplash.com/photo-1611004061856-ccc3cbe944b2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXNxdWV8ZW58MHwwfHx8MTc3MDM2NDAzN3ww&ixlib=rb-4.1.0&q=80&w=1080" alt="Team member" class="h-full w-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div class="absolute bottom-6 left-6 right-6">
                <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
                    <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" class="">
                    </path>
                  </svg>
                  <span class="text-white">Social Media Head</span>
                </div>
                <p class="text-xl font-semibold tracking-tight text-white">
                  Armenia Sean
                </p>
              </div>
            </div>

<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="4" style="transform: translateX(360px) scale(0.85) rotateY(-20deg); opacity: 0.4; filter: brightness(0.6); z-index: 2;">
              <img src="https://images.unsplash.com/photo-1611004061856-ccc3cbe944b2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXNxdWV8ZW58MHwwfHx8MTc3MDM2NDAzN3ww&ixlib=rb-4.1.0&q=80&w=1080" alt="Team member" class="h-full w-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div class="absolute bottom-6 left-6 right-6">
                <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class="">
                    </path>
                    <polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline>
                    <polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline>
                    <polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline>
                    <polyline points="3.27 6.96 12 12.01 20.73 6.96" class=""></polyline>
                    <line x1="12" x2="12" y1="22.08" y2="12" class=""></line>
                  </svg>
                  <span class="text-white">Design Lead</span>
                </div>
                <p class="text-xl font-semibold tracking-tight text-white">
                  Maya Patel
                </p>
              </div>
            </div>

<div class="carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ring-1 ring-white/10 transition-all duration-500" data-index="5" style="transform: translateX(540px) scale(0.75) rotateY(-45deg); opacity: 0; filter: brightness(0.5); z-index: 1;">
              <img src="https://images.unsplash.com/photo-1611004061856-ccc3cbe944b2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjYXNxdWV8ZW58MHwwfHx8MTc3MDM2NDAzN3ww&ixlib=rb-4.1.0&q=80&w=1080" alt="Team member" class="h-full w-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
              <div class="absolute bottom-6 left-6 right-6">
                <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs ring-1 ring-white/20 mb-3">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 text-lime-300">
                    <rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
                    <path d="M9 3v18" class=""></path>
                    <path d="m16 15-3-3 3-3" class=""></path>
                  </svg>
                  <span class="text-white">Platform Engineer</span>
                </div>
                <p class="text-xl font-semibold tracking-tight text-white">
                  Liam Becker
                </p>
              </div>
            </div>
          </div>
          </div>

let currentIndex = 2;
          const prevBtn = document.getElementById('teamPrevBtn');
          const nextBtn = document.getElementById('teamNextBtn');
          const carouselCards = document.querySelectorAll('.carousel-card');

function updateCarousel() {
            carouselCards.forEach((card, i) => {
              const relativePos = i - currentIndex;
              let transform = '';
              let opacity = 1;
              let filter = 'brightness(1)';
              let zIndex = 1;
              let ringClass = 'ring-1 ring-white/10';
              let shadow = '';

if (relativePos === 0) {
                transform = 'translateX(0) scale(1) rotateY(0deg)';
                opacity = 1;
                zIndex = 10;
                ringClass = 'ring-2 ring-lime-300/40';
                shadow = '0 20px 60px rgba(163,230,53,0.3)';
              } else if (relativePos === -1) {
                transform = 'translateX(-180px) scale(0.9) rotateY(10deg)';
                opacity = 0.6;
                filter = 'brightness(0.75)';
                zIndex = 5;
              } else if (relativePos === 1) {
                transform = 'translateX(180px) scale(0.9) rotateY(-10deg)';
                opacity = 0.6;
                filter = 'brightness(0.75)';
                zIndex = 5;
              } else if (relativePos === -2) {
                transform = 'translateX(-360px) scale(0.85) rotateY(20deg)';
                opacity = 0.4;
                filter = 'brightness(0.6)';
                zIndex = 2;
              } else if (relativePos === 2) {
                transform = 'translateX(360px) scale(0.85) rotateY(-20deg)';
                opacity = 0.4;
                filter = 'brightness(0.6)';
                zIndex = 2;
              } else {
                transform = `translateX(${relativePos * 180}px) scale(0.75) rotateY(${-relativePos * 15}deg)`;
                opacity = 0;
                filter = 'brightness(0.5)';
                zIndex = 1;
              }

card.style.transform = transform;
              card.style.opacity = opacity;
              card.style.filter = filter;
              card.style.zIndex = zIndex;
              card.style.boxShadow = shadow;
              card.className = `carousel-card absolute w-80 h-[460px] rounded-2xl overflow-hidden ${ringClass} ${relativePos === 0 ? 'bg-lime-400/10' : ''} transition-all duration-500`;
            });
          }

if (prevBtn) {
            prevBtn.addEventListener('click', () => {
              currentIndex = (currentIndex - 1 + cards.length) % cards.length;
              updateCarousel();
            });
          }

if (nextBtn) {
            nextBtn.addEventListener('click', () => {
              currentIndex = (currentIndex + 1) % cards.length;
              updateCarousel();
            });
          }

updateCarousel();
        })();
      </script>
    </section>

Related Examples

Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.2k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.5k
sticky headings
sticky headings

Anonymous

2 years ago

6.6k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.2k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.9k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.7k