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

672

3

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

2 months ago

738
What is Webby
A showcase feature

Author:
Developer Kwame

3 months ago

306
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

3 months ago

608
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

3 months ago

514
Simple Features section

Author:
Odessa Young

1 year ago

14.7k
Responsive Card Grid with hover animation

Author:
Prashant

2 years ago

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

Author:
Carla Hoffman

6 months ago

858
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

1 year ago

22k
why choose us (features showcase) example

Author:
Erik Hyatt

1 year ago

14.1k
Feature display cards (grid layout)

Author:
Ronald Otieno

6 months ago

1.2k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

11.7k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

1 month ago

259

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8