Image Accordions

import React, { useState } from 'react';

export interface AccordionPanelItem {
  id: string;
  title: string;
  subtitle: string;
  image: string;
  tag: string;
  href?: string;
}

export interface ImageAccordionsProps {
  items: AccordionPanelItem[];
  defaultActive?: number;
  className?: string;
}

export const ImageAccordions: React.FC<ImageAccordionsProps> = ({
  items,
  defaultActive = 0,
  className = '',
}) => {
  const [activeIndex, setActiveIndex] = useState(defaultActive);

  return (
    <div className={`image-accordions-wrapper ${className}`} role="region" aria-label="Interactive image gallery">
      <div className="image-accordions-track">
        {items.map((item, index) => {
          const isActive = activeIndex === index;
          return (
            <div
              key={item.id}
              className={`image-accordion-card ${isActive ? 'image-accordion-active' : ''}`}
              onClick={() => setActiveIndex(index)}
              onMouseEnter={() => setActiveIndex(index)}
              tabIndex={0}
              onKeyDown={e => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault();
                  setActiveIndex(index);
                }
              }}
              role="button"
              aria-expanded={isActive}
              aria-label={item.title}
            >
              <img
                src={item.image}
                alt={item.title}
                className="image-accordion-img"
                loading="lazy"
              />
              <div className="image-accordion-overlay" />
              <div className="image-accordion-content">
                <span className="image-accordion-tag">{item.tag}</span>
                <h3 className="image-accordion-title">{item.title}</h3>
                <p className="image-accordion-subtitle">{item.subtitle}</p>
                {isActive && (
                  <span className="image-accordion-cta">
                    View Project <span aria-hidden="true">→</span>
                  </span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

.image-accordions-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.image-accordions-track {
  display: flex;
  height: 440px;
  gap: 12px;
}
@media (max-width: 768px) {
  .image-accordions-track {
    flex-direction: column;
    height: auto;
  }
}
.image-accordion-card {
  position: relative;
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
}
.image-accordion-active {
  flex: 3.5;
}
@media (max-width: 768px) {
  .image-accordion-card {
    height: 180px;
    flex: none;
  }
  .image-accordion-active {
    height: 260px;
  }
}
.image-accordion-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.image-accordion-card:hover .image-accordion-img {
  transform: scale(1.05);
}
.image-accordion-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);
}
.image-accordion-content {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  color: #ffffff;
  z-index: 2;
}
.image-accordion-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 99px;
  margin-bottom: 8px;
}
.image-accordion-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  white-space: nowrap;
}
.image-accordion-subtitle {
  font-size: 13.5px;
  color: #cbd5e1;
  line-height: 1.4;
  opacity: 0.9;
}
.image-accordion-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #38bdf8;
}

<!-- Tailwind Image Accordion Track -->
<div class="flex flex-col md:flex-row gap-3 h-[420px] w-full max-w-6xl mx-auto">
  <div class="group relative flex-1 hover:flex-[3] transition-all duration-500 rounded-2xl overflow-hidden cursor-pointer">
    <img src="/sample.jpg" class="absolute inset-0 w-full h-full object-cover" alt="Panel" />
    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
    <div class="absolute bottom-6 left-6 text-white">
      <span class="text-xs uppercase bg-white/20 px-2.5 py-1 rounded-full">DevOps</span>
      <h3 class="text-xl font-bold mt-2">Cloud Platform</h3>
    </div>
  </div>
</div>