Code · Live Preview
Componenthtml
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modern Testimonial Carousel - Codekk(www.codekk.dev)</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
fontFamily: {
sans: ["Plus Jakarta Sans", "sans-serif"],
},
},
},
};
</script>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- Remix Icons -->
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
rel="stylesheet"
/>
<!-- Swiper CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body
class="min-h-screen flex items-center justify-center relative py-20 px-4"
>
<!-- Ambient Background Glows -->
<div
class="fixed top-1/4 left-1/4 w-96 h-96 bg-indigo-600/20 rounded-full blur-[128px] pointer-events-none -z-10"
></div>
<div
class="fixed bottom-1/4 right-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-[128px] pointer-events-none -z-10"
></div>
<div class="w-full max-w-7xl mx-auto">
<!-- Section Header -->
<div class="text-center max-w-2xl mx-auto mb-16">
<div
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-4"
>
<i class="ri-sparkling-fill"></i> Wall of Love
</div>
<h2
class="text-3xl md:text-5xl font-bold tracking-tight mb-4 bg-gradient-to-r from-white via-zinc-200 to-zinc-400 bg-clip-text text-transparent"
>
Loved by builders worldwide.
</h2>
<p class="text-zinc-400 text-sm md:text-base">
Don't just take our word for it. Here is what industry leaders have to
say about our platform.
</p>
</div>
<!-- Carousel Container -->
<div class="relative">
<!-- Swiper -->
<div class="swiper testimonialSwiper !pb-16">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<!-- SQUARE CARD (aspect-square) -->
<div
class="card-inner aspect-square p-6 md:p-8 rounded-3xl bg-zinc-900/80 backdrop-blur-xl border border-zinc-800 flex flex-col justify-between relative overflow-hidden group"
>
<!-- Background Quote Watermark -->
<i
class="ri-double-quotes-r absolute -bottom-6 -right-6 text-9xl text-zinc-800/40 -z-0 pointer-events-none transition-transform duration-500 group-hover:scale-110"
></i>
<!-- Top: Stars & Date -->
<div class="flex items-center justify-between z-10">
<div class="flex gap-1 text-amber-400 text-lg">
<i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i>
</div>
<span
class="text-xs font-medium text-zinc-500 uppercase tracking-wider"
>2 days ago</span
>
</div>
<!-- Middle: Review Text -->
<div class="z-10 my-auto">
<p
class="text-zinc-200 text-sm md:text-base leading-relaxed line-clamp-4 font-normal"
>
"Integrating this into our workflow saved us roughly 40
hours a week. The UI is breathtaking and the API response
times are practically instant. Best SaaS investment this
year."
</p>
</div>
<!-- Bottom: User Profile -->
<div
class="flex items-center gap-4 z-10 pt-4 border-t border-zinc-800/80"
>
<img
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80"
alt="User"
class="w-12 h-12 rounded-full object-cover ring-2 ring-indigo-500/30"
/>
<div>
<h4 class="text-white font-semibold text-sm md:text-base">
Elena Rostova
</h4>
<p class="text-zinc-400 text-xs">
VP of Engineering @ Vercel
</p>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div
class="card-inner aspect-square p-6 md:p-8 rounded-3xl bg-zinc-900/80 backdrop-blur-xl border border-zinc-800 flex flex-col justify-between relative overflow-hidden group"
>
<i
class="ri-double-quotes-r absolute -bottom-6 -right-6 text-9xl text-zinc-800/40 -z-0 pointer-events-none transition-transform duration-500 group-hover:scale-110"
></i>
<div class="flex items-center justify-between z-10">
<div class="flex gap-1 text-amber-400 text-lg">
<i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i>
</div>
<span
class="text-xs font-medium text-zinc-500 uppercase tracking-wider"
>1 week ago</span
>
</div>
<div class="z-10 my-auto">
<p
class="text-zinc-200 text-sm md:text-base leading-relaxed line-clamp-4 font-normal"
>
"I’ve tried every competitor on the market. Nothing comes
close to the developer experience here. The documentation
feels like it was written by humans who actually code."
</p>
</div>
<div
class="flex items-center gap-4 z-10 pt-4 border-t border-zinc-800/80"
>
<img
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80"
alt="User"
class="w-12 h-12 rounded-full object-cover ring-2 ring-indigo-500/30"
/>
<div>
<h4 class="text-white font-semibold text-sm md:text-base">
Marcus Vance
</h4>
<p class="text-zinc-400 text-xs">Lead Designer @ Linear</p>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide">
<div
class="card-inner aspect-square p-6 md:p-8 rounded-3xl bg-zinc-900/80 backdrop-blur-xl border border-zinc-800 flex flex-col justify-between relative overflow-hidden group"
>
<i
class="ri-double-quotes-r absolute -bottom-6 -right-6 text-9xl text-zinc-800/40 -z-0 pointer-events-none transition-transform duration-500 group-hover:scale-110"
></i>
<div class="flex items-center justify-between z-10">
<div class="flex gap-1 text-amber-400 text-lg">
<i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-half-fill"></i>
</div>
<span
class="text-xs font-medium text-zinc-500 uppercase tracking-wider"
>3 weeks ago</span
>
</div>
<div class="z-10 my-auto">
<p
class="text-zinc-200 text-sm md:text-base leading-relaxed line-clamp-4 font-normal"
>
"We scaled from 10,000 to 1M users without changing a single
line of our billing infrastructure thanks to this tool.
Absolute lifesaver for fast-growing startups."
</p>
</div>
<div
class="flex items-center gap-4 z-10 pt-4 border-t border-zinc-800/80"
>
<img
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=150&auto=format&fit=crop&q=80"
alt="User"
class="w-12 h-12 rounded-full object-cover ring-2 ring-indigo-500/30"
/>
<div>
<h4 class="text-white font-semibold text-sm md:text-base">
Sarah Jenkins
</h4>
<p class="text-zinc-400 text-xs">Founder @ Raycast</p>
</div>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="swiper-slide">
<div
class="card-inner aspect-square p-6 md:p-8 rounded-3xl bg-zinc-900/80 backdrop-blur-xl border border-zinc-800 flex flex-col justify-between relative overflow-hidden group"
>
<i
class="ri-double-quotes-r absolute -bottom-6 -right-6 text-9xl text-zinc-800/40 -z-0 pointer-events-none transition-transform duration-500 group-hover:scale-110"
></i>
<div class="flex items-center justify-between z-10">
<div class="flex gap-1 text-amber-400 text-lg">
<i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i>
</div>
<span
class="text-xs font-medium text-zinc-500 uppercase tracking-wider"
>1 month ago</span
>
</div>
<div class="z-10 my-auto">
<p
class="text-zinc-200 text-sm md:text-base leading-relaxed line-clamp-4 font-normal"
>
"Customer support is on another level. I reported a minor
bug on a Sunday evening and had a patched release waiting in
my inbox by Monday morning."
</p>
</div>
<div
class="flex items-center gap-4 z-10 pt-4 border-t border-zinc-800/80"
>
<img
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80"
alt="User"
class="w-12 h-12 rounded-full object-cover ring-2 ring-indigo-500/30"
/>
<div>
<h4 class="text-white font-semibold text-sm md:text-base">
David Kim
</h4>
<p class="text-zinc-400 text-xs">CTO @ Supabase</p>
</div>
</div>
</div>
</div>
<!-- Slide 5 -->
<div class="swiper-slide">
<div
class="card-inner aspect-square p-6 md:p-8 rounded-3xl bg-zinc-900/80 backdrop-blur-xl border border-zinc-800 flex flex-col justify-between relative overflow-hidden group"
>
<i
class="ri-double-quotes-r absolute -bottom-6 -right-6 text-9xl text-zinc-800/40 -z-0 pointer-events-none transition-transform duration-500 group-hover:scale-110"
></i>
<div class="flex items-center justify-between z-10">
<div class="flex gap-1 text-amber-400 text-lg">
<i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i><i class="ri-star-fill"></i
><i class="ri-star-fill"></i>
</div>
<span
class="text-xs font-medium text-zinc-500 uppercase tracking-wider"
>2 months ago</span
>
</div>
<div class="z-10 my-auto">
<p
class="text-zinc-200 text-sm md:text-base leading-relaxed line-clamp-4 font-normal"
>
"Simply stunning. It added an instant layer of polish and
credibility to our application. Our enterprise conversion
rate jumped 18% after implementing this."
</p>
</div>
<div
class="flex items-center gap-4 z-10 pt-4 border-t border-zinc-800/80"
>
<img
src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&auto=format&fit=crop&q=80"
alt="User"
class="w-12 h-12 rounded-full object-cover ring-2 ring-indigo-500/30"
/>
<div>
<h4 class="text-white font-semibold text-sm md:text-base">
Amara Okafor
</h4>
<p class="text-zinc-400 text-xs">
Product Manager @ Stripe
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Custom Navigation Buttons -->
<div class="flex items-center justify-center gap-4 mt-4">
<button
class="swiper-button-prev-custom w-12 h-12 rounded-full bg-zinc-900 border border-zinc-800 hover:border-indigo-500 hover:bg-indigo-600/10 text-white flex items-center justify-center transition-all duration-300 shadow-lg cursor-pointer"
>
<i class="ri-arrow-left-line text-lg"></i>
</button>
<button
class="swiper-button-next-custom w-12 h-12 rounded-full bg-zinc-900 border border-zinc-800 hover:border-indigo-500 hover:bg-indigo-600/10 text-white flex items-center justify-center transition-all duration-300 shadow-lg cursor-pointer"
>
<i class="ri-arrow-right-line text-lg"></i>
</button>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script src="app.js"></script>
</body>
</html>
Detecting libraries...
Component details
Overview, install command, dependencies, and project links.
A modern dark-themed testimonial carousel built with HTML, Tailwind CSS, and Swiper.js. Features a centered active slide that glows with an indigo border while inactive slides scale down and blur - creating a clean focus effect without any extra JavaScript. Each card includes a star rating, review text, user avatar with an indigo ring, name, and job title. The pagination dots animate from a small circle to a wide pill shape on the active slide. Navigation arrows have a hover state that shifts to indigo. Autoplay pauses on mouse enter and resumes on leave. Built for landing pages, SaaS marketing sites, agency portfolios, and any page that needs a professional social proof section. Single HTML file with CDN links - no build step, no npm, open it in a browser and it works. Key features: Active slide highlight with indigo glow border Inactive slides scale to 88% with blur and reduced opacity Animated pagination - dot expands to pill on active Custom prev/next buttons with indigo hover state Autoplay with pause on hover Responsive - 1 slide on mobile, 1.5 on landscape, 2 on tablet, 3 on desktop Ambient background glow blobs using fixed blur divs Plus Jakarta Sans font via Google Fonts Remix Icons for stars, arrows, and quote watermark
Added Aug 28, 2026
Discussion
Feedback, implementation tips, and usage notes.
0 threads
Comments
Sign in to join the conversation