Home
Michael Andreuzza
interactive testimonial with Tailwind CSS and Alpine.js

interactive testimonial with Tailwind CSS and Alpine.js

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us,endorsement,review

Feature showcase Testimonial

Author Michael Andreuzza

2.3k

5

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section x-data="{ testimonialActive: 1 }" class="bg-[#1a1a1f] relative overflow-hidden">

<svg class="absolute blur-3xl opacity-70  -top-6 animate-pulse" width="100%" height="100%" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0_17_56)">
   <g filter="url(#filter0_f_17_56)">
    <path d="M128.6 0H0V322.2L250.5 231.5L128.6 0Z" fill="white"></path>
    <path d="M0 322.2V400H240H320L250.5 231.5L0 322.2Z" fill="#7000FF"></path>
    <path d="M320 400H400V78.75L250.5 231.5L320 400Z" fill="#5200FF"></path>
    <path d="M400 0H128.6L250.5 231.5L400 78.75V0Z" fill="#380094"></path>
   </g>
  </g>
  <defs>
   <filter id="filter0_f_17_56" x="-160.333" y="-160.333" width="720.666" height="720.666" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
    <feGaussianBlur stdDeviation="80.1666" result="effect1_foregroundBlur_17_56"></feGaussianBlur>
   </filter>
  </defs>
 </svg>
 <div class="relative max-w-7xl 2xl:max-w-screen-2xl  lg:px-16 md:px-12 mx-auto py-12 px-8 h-svh flex flex-col justify-center items-center">
  <div class="lg:border lg:p-20 lg:rounded-[4rem] lg:bg-[#1a1a1f]/50 border-white/5 lg:backdrop-blur-xl lg:shadow-2xl 2xl:p-32">
   
   <div class="pb-6 text-gray-200 font-medium mx-auto text-xl h-64 italic serif text-balance items-center text-center lg:text-4xl " x-show="testimonialActive === 1">
    <p> <span class="text-[#a180ea]">"</span> Pepe is like a unicorn in a field of horses, magically bridging the gap between design and coding. His designs sparkle brighter than a disco ball at a 70s party, hitting that sweet spot between trendy and 'wow, did he really just pull that off? <span class="text-[#a180ea]">"</span> </p>
   </div>
   <div class="pb-6 text-gray-200 font-medium mx-auto text-xl h-64 italic serif text-balance items-center text-center lg:text-4xl " x-show="testimonialActive === 2" style="display: none;">
    <p> <span class="text-[#a180ea]">"</span> Working with Pepe is like finding a needle in a haystack – except the needle comes to you, and it's golden. His design eye is sharper than my grandma's kitchen knives, and trust me, those can slice through anything. Can't wait to conjure up more projects with him, maybe something involving flying pigs next time? <span class="text-[#a180ea]">"</span> </p>
   </div>
   <div class="pb-6 text-gray-200 font-medium mx-auto text-xl h-64 italic serif text-balance items-center text-center lg:text-4xl " x-show="testimonialActive === 3" style="display: none;">
    <p> <span class="text-[#a180ea]">"</span> pepe is that rare blend of designer and developer who actually knows what 'deadline' means – a mythical creature in our industry. He whipped up landing pages faster than I could say Banana, with a flair that made me wonder if he moonlights as a magician. If he asks for a rabbit, just give it to him, no questions asked. <span class="text-[#a180ea]">"</span> </p>
   </div>
   <div class="flex items-center justify-center mt-12">
     <button @click.prevent="testimonialActive = 1" class="inline-block mx-2 font-bold text-center rounded-xl  focus:outline-none focus:ring-2 ring-offset-2  ring-white ring-offset-[#1a1a1f] size-12"> <img class="inline-block size-12 rounded-xl object-cover" src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=800&amp;auto=format&amp;fit=crop&amp;q=60&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjN8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D" alt="#_"> </button><button @click.prevent="testimonialActive = 2" class="inline-block mx-2 font-bold text-center rounded-xl  focus:outline-none focus:ring-2 ring-offset-2  ring-white ring-offset-[#1a1a1f] size-12"> <img class="inline-block size-12 rounded-xl object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&amp;auto=format&amp;fit=crop&amp;q=60&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fHw%3D" alt="#_"> </button><button @click.prevent="testimonialActive = 3" class="inline-block mx-2 font-bold text-center rounded-xl  focus:outline-none focus:ring-2 ring-offset-2  ring-white ring-offset-[#1a1a1f] size-12"> <img class="inline-block size-12 rounded-xl object-cover" src="https://images.unsplash.com/photo-1639149888905-fb39731f2e6c?q=80&amp;w=2864&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="#_"> </button>
   </div> 
   <div class="text-center py-6" x-show="testimonialActive === 1">
    <h2 class="text-white  font-medium text-base"> Jhonny Mnemonic </h2> <a href="#" class="text-xs text-gray-400"> Chief Wizard of Nowhere Land </a>
   </div>
   <div class="text-center py-6" x-show="testimonialActive === 2" style="display: none;">
    <h2 class="text-white  font-medium text-base"> Roberta Austina </h2> <a href="#" class="text-xs text-gray-400"> Grandmaster of Excuse Crafting </a>
   </div>
   <div class="text-center py-6" x-show="testimonialActive === 3" style="display: none;">
    <h2 class="text-white  font-medium text-base"> Manolito Gafotas </h2> <a href="#" class="text-xs text-gray-400"> Professional Procrastinator &amp; Part-Time Visionary </a>
   </div>
  </div>
 </div>
 <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
  <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-white ring-opacity-10">
   <div class="flex w-0 flex-1 items-center p-4">
    <div class="w-full">
     <p class="text-sm font-medium text-neutral-900">Tutorial</p>
     <p class="mt-1 text-sm text-neutral-500">
      How to create an interactive testimonial with Astrojs, Tailwind CSS
      and Alpine.js
     </p>
     <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com"> by © Lexington Themes</a> </p>
    </div>
   </div>
   <div class="flex">
    <div class="flex flex-col divide-y divide-neutral-200">
     <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-an-interactive-testimonial-with-astro-tailwind-css-and-alpine-js/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
     <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/alpine-testimonial/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
    </div>
   </div>
  </div>
 </div>
</section>

Related Examples

beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.8k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

8 months ago

916
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

118
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

5 months ago

1.1k
basichtml
this is basic html

Author:
Anonymous

4 months ago

159
Testimonials section

Author:
Bunny

2 years ago

10k
Modern page
hero page by salvator

Author:
Baraka Salvator

5 months ago

917
Features Component

Author:
KULDEEP

3 months ago

494
Services showcase Section
With hover effect on cards

Author:
Anonymous

1 year ago

2.4k
Features grid example
Tailwind clean and responsive features section with the heading

Author:
Alok

2 years ago

13.7k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4k
Features list template

Author:
Lukas Müller

2 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12