profile

user profile

This tailwind example is contributed by gidy, on 28-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Profile Other

Author gidy

Tailwind v3.4 1.1k 6

Fork Fullscreen

<div class="max-w-sm mx-auto mt-40">
    <div class="p-3 flex items-center justify-between border-t cursor-pointer hover:bg-gray-200">
        <div class="flex items-center">
            <img class="rounded-full h-10 w-10" src="https://images.unsplash.com/photo-1547619292-870fe4aeadb8?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
            <div class="ml-2 flex flex-col">
                <div class="leading-snug text-sm text-gray-900 font-bold">Gratien</div>
                <div class="leading-snug text-xs text-gray-600">@Gratien</div>
            </div>
        </div>
        <button class="h-8 px-3 text-md font-bold text-blue-400 border border-blue-400 rounded-full hover:bg-blue-100">Follow</button>
    </div>
    <div class="p-3 flex items-center justify-between border-t cursor-pointer hover:bg-gray-200">
        <div class="flex items-center">
            <img class="rounded-full h-10 w-10" src="https://images.unsplash.com/photo-1547619292-870fe4aeadb8?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
            <div class="ml-2 flex flex-col">
                <div class="leading-snug text-sm text-gray-900 font-bold">GIDY</div>
                <div class="leading-snug text-xs text-gray-600">@GIDY</div>
            </div>
        </div>
        <button class="h-8 px-3 text-md font-bold text-blue-400 border border-blue-400 rounded-full hover:bg-blue-100">Follow</button>
    </div>
    <div class="p-3 flex items-center justify-between border-t cursor-pointer hover:bg-gray-200">
        <div class="flex items-center">
            <img class="rounded-full h-10 w-10" src="https://images.unsplash.com/photo-1547619292-870fe4aeadb8?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
            <div class="ml-2 flex flex-col">
                <div class="leading-snug text-sm text-gray-900 font-bold">KABOSS</div>
                <div class="leading-snug text-xs text-gray-600">@KABOSS</div>
            </div>
        </div>
        <button class="h-8 px-3 text-md font-bold text-blue-400 border border-blue-400 rounded-full hover:bg-blue-100">Follow</button>
    </div>
</div>

Related Examples

portifolio
skills

ishimwe prince

1 year ago

1.7k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

9 months ago

742
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Augustin

1 year ago

1.5k
Recipe Card
beautiful recipe component with image and step-by-step instructions

Anonymous

3 years ago

8.1k
Drag & Drop File Upload with Progress & Image Preview

JUGENDRA GANGWAR

1 month ago

115
ACODE,ASTER
love my projuct

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

791
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Coastal UI

1 year ago

2.1k
Dionysus AI Chat

Maxim

1 year ago

1.2k
Contact Page

Sedat Kumcu

1 year ago

2.1k
GMT Live Coding

Seth

7 months ago

422