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

2k

4

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

10 months ago

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

Author:
Coastal UI

3 months ago

534
Testimonials

Author:
Lîmåã M

1 year ago

11.4k
Features list with icons on top

Author:
Lina Lindström

2 years ago

9.2k
Testimonial wall

Author:
yousef

1 year ago

2.6k
Feature cards
Feature showcase

Author:
Steven Kuhn

2 years ago

9.8k
Features showcase section
showcase key features and benefits

Author:
Mereani Waqa

1 year ago

6.2k
Feature Section Cards

Author:
Akram Khan

10 months ago

1.5k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

49.5k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
Feature cards with icons on top

Author:
Manon Daniel

1 year ago

15.4k
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

15.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ 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.1