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.4k

6

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

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

Author:
Coastal UI

11 months ago

988
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

16.4k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.9k
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:
kzsamir849

1 year ago

2.1k
Features list template

Author:
Lukas Müller

3 years ago

11.3k
Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

1 year ago

2.4k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

9 months ago

401
Feature display cards (grid layout)

Author:
Ronald Otieno

1 year ago

2.9k
Testimonial section
Gradient background and a testimonial quote with a highlighted phrase. The testimonial includes an image, name, and occupation.

Author:
Carla Hoffman

1 year ago

2.5k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

6 months ago

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

Author:
Nikita

2 years ago

5.4k

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

© 2026 TailwindFlex. All Rights Reserved.

v1.12