AI Trends Showcase

A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts.

Perfect For
Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

This tailwind example is contributed by Ayyamperumal S, on 08-Jun-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us,Info, Show info, Statistics,Email campaign,upcoming, Pre-launch page, Teaser page, Under construction page, Placeholder page, Sneak peek page,Launch page

Header Banner Breadcrumb Carousel Feature showcase Hero Stats Other Range Slider Newsletter Coming Soon Page

Author Ayyamperumal S

Tailwind v3.4 227 1

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Intelligence Feed</title>

</head>
<body>

<div>
                <div
                    class="inline-flex items-center px-3 py-1 rounded-full border border-slate-800 text-[10px] tracking-[0.25em] uppercase text-emerald-400"
                >
                    Intelligence Feed
                </div>

<h2
                    class="mt-3 text-2xl md:text-3xl font-bold text-white"
                >
                    AI & Emerging Technology
                </h2>
            </div>

<a
                href="https://tailwindflex.com/@ayyam"
                target="_blank"
                rel="noopener noreferrer"
                class="shrink-0 text-xs md:text-sm text-slate-400 hover:text-white transition"
            >
                View More Components →
            </a>

</div>

</div>

</div>

</div>

</section>

let active = 0;
let autoSlide;

const categoryEl = document.getElementById("category");
const titleEl = document.getElementById("title");
const descriptionEl = document.getElementById("description");
const tagsEl = document.getElementById("tags");
const slideListEl = document.getElementById("slideList");
const indicatorsEl = document.getElementById("indicators");

function render(){

const slide = slides[active];

categoryEl.textContent = slide.category;
    titleEl.textContent = slide.title;
    descriptionEl.textContent = slide.description;

tagsEl.innerHTML = slide.tags.map(tag => `
        <span class="px-3 py-1 text-xs rounded-full border border-slate-800 text-slate-400">
            ${tag}
        </span>
    `).join('');

slideListEl.innerHTML = slides.map((item,index)=>`

<button
            onclick="setActive(${index})"
            class="
            w-full
            text-left
            p-4
            rounded-2xl
            transition-all
            duration-300

${
                active===index
                ? 'bg-slate-900 border border-slate-700'
                : 'border border-transparent hover:border-slate-800'
            }
            "
        >

<div>

<div class="text-[10px] tracking-[0.2em] uppercase text-slate-500 mb-2">
                        ${item.category}
                    </div>

<div class="text-sm font-medium text-white">
                        ${item.title}
                    </div>

</div>

<div class="text-slate-600 text-xs">
                    0${index+1}
                </div>

</div>

</button>

`).join('');

indicatorsEl.innerHTML = slides.map((_,index)=>`

<button
            onclick="setActive(${index})"
            class="
            transition-all
            duration-300
            rounded-full

${
                active===index
                ? 'w-10 h-2 bg-emerald-500'
                : 'w-2 h-2 bg-slate-700'
            }
            "
        ></button>

`).join('');
}

function next(){
    active = (active + 1) % slides.length;
    render();
}

function prev(){
    active = (active - 1 + slides.length) % slides.length;
    render();
}

function setActive(index){
    active = index;
    render();

clearInterval(autoSlide);
    startAutoPlay();
}

function startAutoPlay(){

autoSlide = setInterval(()=>{
        next();
    },2000);

}

document.getElementById("nextBtn").addEventListener("click",()=>{
    next();
    clearInterval(autoSlide);
    startAutoPlay();
});

document.getElementById("prevBtn").addEventListener("click",()=>{
    prev();
    clearInterval(autoSlide);
    startAutoPlay();
});

render();
startAutoPlay();
</script>

</body>
</html>

Related Examples

Responsive Card Grid with hover animation

Prashant

4 years ago

20.6k
Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
Promotional sticky top section

Leon Bachmann

3 years ago

13.3k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Junclarkaizen Pagu

2 years ago

10.1k
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
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Vikram Choudhary

2 years ago

11.8k
Maintenance page template
The site is under maintenance placeholder page

Anonymous

2 years ago

12.1k
Background image section

Marc

2 years ago

7.3k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Nikita

2 years ago

5.8k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

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

2 years ago

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

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

2 years ago

5k