User Feedback Card

A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

This tailwind example is contributed by Anum Shahana, on 16-Oct-2024. Component is made with Tailwind v3.4. It is responsive.

Card

Author Anum Shahana

Tailwind v3.4 2.1k 6

Fork Fullscreen

<div class="w-full h-screen bg-gray-200 px-10 pt-10">
    <div class="relative mt-16 mb-32 max-w-sm mx-auto mt-24">
        <div class="rounded-lg overflow-hidden shadow-lg bg-gray-50">
            <div class="absolute -mt-16 w-full flex justify-center">
                <div class="h-36 w-36 border-4 border-gray-200 rounded-md">
                    <img src="https://img.freepik.com/free-photo/handsome-bearded-guy-posing-against-white-wall_273609-20597.jpg?size=626&ext=jpg&ga=GA1.1.1369675164.1715299200&semt=sph" class="rounded-md object-cover h-full w-full shadow-lg" alt="Hamza ali" />
                </div>
            </div>
            <div class="px-6 mt-20">
                <h1 class="font-semibold text-4xl text-center mb-1 text-blue-600">Hamza Ali</h1>
                <p class="text-gray-700 text-sm text-center italic">Frontend Developer</p>
                <p class="text-center text-gray-500 text-base pt-4 font-light">
                    Working with Anum has been an absolute pleasure. Her dedication
                    to her craft is unmatched, and her attention to detail is
                    commendable.
                </p>
                <div class="flex justify-center mt-4">
                    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Connect</button>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Admin dashboard cards
Card groups for showing stats/info.

Gopi Yadav

3 years ago

22.3k
Targeta
Targeta

Raul antonio de la cruz hernandez

10 months ago

863
Highlights - Speakers Section

ABDO-SY

1 year ago

1.4k
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

3 months ago

385
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

10 months ago

759
Tailwind card with gradient border

Elijah Davis

3 years ago

16.2k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Hamza Atig

1 year ago

1.8k
Responsive Photo Grid
A fully responsive image grid that automatically adjusts its columns across mobile, tablet, and desktop screens.

JUGENDRA GANGWAR

2 months ago

222
Profit Card
Profit card with deatils

dongol heart

1 year ago

3k
KPI Cards
estilo Shopify / Stripe

Raul antonio de la cruz hernandez

10 months ago

484
zoom in effect card
A responsive card featuring an eye-catching scenic image, designed with Tailwind CSS. This component includes hover effects for the image.

Anum Shahana

1 year ago

3k