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

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

Author:
Orson Kincaid

9 months ago

1.4k
User testimonials

Author:
Conan Hilton

3 years ago

12.5k
basichtml
this is basic html

Author:
Anonymous

3 weeks ago

92
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

6 days ago

67
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

Author:
INGRIDE MUZIRANENGE

1 month ago

147
basichtml
this is basic html

Author:
Anonymous

3 weeks ago

36
Simple testimonial

Author:
Samuel Dawson

2 years ago

10.7k
Simple testimonial card

Author:
Laurits

2 years ago

10.7k
Testimonial Card

Author:
Anonymous

7 months ago

756
Landing page

Author:
Maxim

3 months ago

1k
Designing a Responsive Activity Feed with Tailwind CSS
Enhance your web application by building a sleek and responsive activity feed using Tailwind CSS. This comprehensive guide walks you through creating an interactive feed section featuring customizable icons, links, and timestamps. Learn how to implement a visually appealing and accessible timeline that adapts seamlessly to any device, improving user engagement and overall experience

Author:
zobaidul kaziex

10 months ago

1.8k
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).

Author:
rohit whyphy

4 months ago

689

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components