- No data uploaded
- Instant results
Tailwind CSS Testimonial Slider for Vue 3 — Glassmorphism
A production-ready glassmorphism testimonial slider: a customer testimonial carousel that shows one quote at a time with labelled slide buttons — no autoplay, so users stay in control. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vue 3 code update instantly in your browser.
Live component editor
Live preview
<script setup>
import { ref } from 'vue';
const slide = ref("1");
</script>
<template>
<section class="px-6 py-16" aria-roledescription="carousel" aria-label="Customer testimonials">
<div class="max-w-2xl mx-auto text-center">
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-full bg-[#4f46e5]/10 text-[#4f46e5]">Loved by teams</span>
<div class="mt-6 p-8 bg-white/60 backdrop-blur-xl border border-white/60 shadow-2xl rounded-xl">
<figure v-show="slide === '1'">
<blockquote class="text-xl font-medium leading-relaxed text-slate-900">“We shipped our new checkout in a single afternoon. Conversion went up 18% the same week.”</blockquote>
<figcaption class="mt-6 text-sm text-slate-500"><strong>Priya Sharma</strong> · Head of Growth, Kartly</figcaption>
</figure>
<figure v-show="slide === '2'">
<blockquote class="text-xl font-medium leading-relaxed text-slate-900">“The components are clean, accessible and they just work with our design tokens.”</blockquote>
<figcaption class="mt-6 text-sm text-slate-500"><strong>Daniel Okafor</strong> · Staff Engineer, Lumen</figcaption>
</figure>
<figure v-show="slide === '3'">
<blockquote class="text-xl font-medium leading-relaxed text-slate-900">“Dark mode and theming out of the box saved us weeks of design back-and-forth.”</blockquote>
<figcaption class="mt-6 text-sm text-slate-500"><strong>Mia Fischer</strong> · Product Designer, Northwind</figcaption>
</figure>
</div>
<div class="mt-6 flex justify-center gap-2" role="group" aria-label="Choose testimonial">
<button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-700 hover:bg-white/70 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" aria-label="Show testimonial 1" @click="slide = '1'" :aria-pressed="slide === '1'">1</button>
<button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-700 hover:bg-white/70 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" aria-label="Show testimonial 2" @click="slide = '2'" :aria-pressed="slide === '2'">2</button>
<button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-700 hover:bg-white/70 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" aria-label="Show testimonial 3" @click="slide = '3'" :aria-pressed="slide === '3'">3</button>
</div>
</div>
</section>
</template>
More Tailwind components for Vue 3
All components →- Hero Section A landing-page hero with an announcement badge, a large headline, supporting copy, primary and secondary calls to action and a row of social-proof stats
- Feature Grid A marketing section with a centered heading and a responsive grid of six feature cards, each with an icon badge, title and description
- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Currency Pricing Table A dynamic pricing section that detects the visitor’s currency, shows purchasing-power-adjusted regional prices and lets users switch between USD, EUR, GBP, INR and JPY
- FAQ Accordion A frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded
- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Signup Form A registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action
- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
Install Tailwind CSS for Vue 3
Create a Vue 3 project with Vite, then add Tailwind CSS v3:
npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -pSet content: ['./index.html', './src/**/*.{vue,js}'] in tailwind.config.js, and add to src/style.css:
@tailwind base;
@tailwind components;
@tailwind utilities;The brand color is applied with arbitrary values such as bg-[#4f46e5], so no theme configuration is needed.
Use the testimonial slider in Vue 3
<!-- App.vue -->
<script setup>
import TestimonialSlider from './TestimonialSlider.vue';
</script>
<template>
<TestimonialSlider />
</template>Accessibility & customization
There is no auto-rotation (WCAG 2.2.2), each slide button has an aria-label and aria-pressed state, and quotes are marked up with <blockquote> and <figcaption>.
Every color, radius and dark-mode choice is baked into plain utility classes, so the copied code has no runtime dependency on this site. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Tailwind CSS v3.4+ |
| Library | Vue 3 (<script setup>) |
| Interactive state | slide |
| Dark mode | Yes — toggle in the editor |
| Style | Glassmorphism (backdrop blur) |
Frequently asked questions
How do I install this Tailwind testimonial slider in Vue 3?
Create a Vue 3 project, install Tailwind CSS as shown in the installation section, then paste the generated code.
Can I change the color of the testimonial slider?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the testimonial slider support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the testimonial slider accessible?
There is no auto-rotation (WCAG 2.2.2), each slide button has an aria-label and aria-pressed state, and quotes are marked up with <blockquote> and <figcaption>.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.