Home
wtfbrh
Twitter testimonial card

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 CSS v3. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author wtfbrh

1.8k

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

Review Cards
Multiple rounded cards with user names, comments, and star ratings.

Author:
Hyun-woo Cho

2 years ago

8.4k
User review cards
Resposive testemonial cards

Author:
Erik Hyatt

2 years ago

15.1k
Testimonial examples in Tailwind CSS
Here are some testimonial section examples using Tailwind CSS:

Author:
zobaidul kaziex

1 year ago

1.5k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

6 months ago

640
Testimonials

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

10 months ago

1.7k
Testimonial wall

Author:
yousef

1 year ago

3.6k
Testimonials

Author:
Lîmåã M

2 years ago

12k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

3 years ago

12.1k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

8 months ago

977
Testimonial slide gradient

Author:
Freja Jensen

3 years ago

10.6k
Modern page
hero page by salvator

Author:
Baraka Salvator

8 months ago

1.3k
User testimonial/review section

Author:
Sophia Baker

3 years ago

15.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components