Twitter testimonial card

Forked from @nishant-trivedi/twitter-testimonial-card

This tailwind example is contributed by wtfbrh, on 25-May-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author wtfbrh

Tailwind v3.4 2.1k 9

Fork Fullscreen

<div class="rounded-xl px-2 ">
    <div
        class="h-auto max-w-xl w-full border border-blue-200 hover:bg-blue-200 transition ease-in-out cursor-pointer px-4 py-6 rounded-xl">
        <p class="font-thin text-white whitespace-pre-line break-words">
        <p>Recently came across a fantastic article by
            <a href="" class="text-blue-600" target="_blank" rel="noopener">@company</a> on "Becoming a Value-driven Software
            Engineer."
            It's a must-read!
            Check it out (link) and don't forget to subscribe to their newsletter (link).
        </p>
        </p>
        <div class="flex w-full items-center justify-between mt-6">
            <p class="font-magnat text-lg flex items-center">
                <img class="w-8 h-8 rounded-full object-cover mr-3"
                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8aGVhZHNob3R8ZW58MHwxfHx8MTY5MTIxOTI0Nnww&ixlib=rb-4.0.3&q=80&w=1080">
                John doe
            </p>
            <a href="#" target="_blank">
                <svg class="w-6 h-6" version="1.1" id="Layer_1" viewBox="0 0 410.155 410.155" fill="#000000">
                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                    <g id="SVGRepo_iconCarrier">
                        <path
                            d="M403.632,74.18c-9.113,4.041-18.573,7.229-28.28,9.537c10.696-10.164,18.738-22.877,23.275-37.067 l0,0c1.295-4.051-3.105-7.554-6.763-5.385l0,0c-13.504,8.01-28.05,14.019-43.235,17.862c-0.881,0.223-1.79,0.336-2.702,0.336 c-2.766,0-5.455-1.027-7.57-2.891c-16.156-14.239-36.935-22.081-58.508-22.081c-9.335,0-18.76,1.455-28.014,4.325 c-28.672,8.893-50.795,32.544-57.736,61.724c-2.604,10.945-3.309,21.9-2.097,32.56c0.139,1.225-0.44,2.08-0.797,2.481 c-0.627,0.703-1.516,1.106-2.439,1.106c-0.103,0-0.209-0.005-0.314-0.015c-62.762-5.831-119.358-36.068-159.363-85.14l0,0 c-2.04-2.503-5.952-2.196-7.578,0.593l0,0C13.677,65.565,9.537,80.937,9.537,96.579c0,23.972,9.631,46.563,26.36,63.032 c-7.035-1.668-13.844-4.295-20.169-7.808l0,0c-3.06-1.7-6.825,0.485-6.868,3.985l0,0c-0.438,35.612,20.412,67.3,51.646,81.569 c-0.629,0.015-1.258,0.022-1.888,0.022c-4.951,0-9.964-0.478-14.898-1.421l0,0c-3.446-0.658-6.341,2.611-5.271,5.952l0,0 c10.138,31.651,37.39,54.981,70.002,60.278c-27.066,18.169-58.585,27.753-91.39,27.753l-10.227-0.006 c-3.151,0-5.816,2.054-6.619,5.106c-0.791,3.006,0.666,6.177,3.353,7.74c36.966,21.513,79.131,32.883,121.955,32.883 c37.485,0,72.549-7.439,104.219-22.109c29.033-13.449,54.689-32.674,76.255-57.141c20.09-22.792,35.8-49.103,46.692-78.201 c10.383-27.737,15.871-57.333,15.871-85.589v-1.346c-0.001-4.537,2.051-8.806,5.631-11.712c13.585-11.03,25.415-24.014,35.16-38.591 l0,0C411.924,77.126,407.866,72.302,403.632,74.18L403.632,74.18z"
                            style="fill: rgb(118, 169, 234);"></path>
                    </g>
                </svg>
            </a>
        </div>
    </div>
</div>

Related Examples

Tailwind CSS Testimonial Slider
Descriptive background image with Testimonial Slider .

Bernard Omuse

2 years ago

3.3k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

4 months ago

411
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
Customer testimonial card
Responsive user testimonial card with image

Arya

4 years ago

12.7k
Testimonial cards
each card contains a customer quote, an image of the customer, and their name.

Komal Jain

2 years ago

11.6k
Testimonial slide gradient

Freja Jensen

3 years ago

11.1k
Testimonial for dark theme

Sophia Baker

3 years ago

10.9k
Testimonial wall
added light mode support

yousef

2 years ago

3.9k
Testimonial card

Leon Bachmann

3 years ago

13k
Landing page

Maxim

1 year ago

2.8k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
User testimonial/review section

Sophia Baker

3 years ago

16.5k