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

1 year ago

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

Author:
Coastal UI

5 months ago

691
Minimal Testimonial Card

Author:
Amit Pachange

2 years ago

8.4k
Testimonial slide gradient

Author:
Freja Jensen

2 years ago

10.2k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

7 months ago

1.8k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

11.6k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

11.6k
Key Features
Showcase Key Features of your app

Author:
Anonymous

1 year ago

1.2k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

13.1k
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.5k
Simple Features section

Author:
Odessa Young

2 years ago

16.1k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

1 year ago

3.1k

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