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

Simple Testimonial
Responsive and supports dark mode

Orson Kincaid

2 years ago

3k
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
Skyhaven International
This is a responsive, modern airport website built with Tailwind CSS (a utility-first CSS framework) and Font Awesome for icons. It includes key sections that an airport website would typically have, such as flight information, services, parking, terminal maps, and contact details

INGRIDE MUZIRANENGE

1 year ago

1.1k
Testimonial card

Leon Bachmann

3 years ago

13k
interactive testimonial with Tailwind CSS and Alpine.js

Michael Andreuzza

2 years ago

2.9k
The future ai
The is technology

ORGIN_DREAMS

1 year ago

1.5k
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
Testimonial Card with stars ratings

Quentin Rivers

2 years ago

2.4k
Testimonial Section with Gradient Background
The section includes a company logo at the top, a customer testimonial in the center, and the author's name and position at the bottom.

Elsabe Fourie

2 years ago

9k
Modern page
hero page by salvator

Baraka Salvator

1 year ago

1.9k
Testimonial full width

Piet Vriend

3 years ago

13.9k
Testimonials

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

1.9k