Home
Simon Scheffer
Twitter like users list

Twitter like users list

This tailwind example is contributed by Simon Scheffer, on 12-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Profile List

Author Simon Scheffer

12.1k

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://loremflickr.com/g/600/600/girl">
            <div class="ml-2 flex flex-col">
                <div class="leading-snug text-sm text-gray-900 font-bold">Jane doe</div>
                <div class="leading-snug text-xs text-gray-600">@jane</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://loremflickr.com/g/600/600/boy">
            <div class="ml-2 flex flex-col">
                <div class="leading-snug text-sm text-gray-900 font-bold">john doe</div>
                <div class="leading-snug text-xs text-gray-600">@john</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://loremflickr.com/g/600/600/paris">
            <div class="ml-2 flex flex-col">
                <div class="leading-snug text-sm text-gray-900 font-bold">Paris</div>
                <div class="leading-snug text-xs text-gray-600">@paris</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

Users ranking list

Author:
Leif99

2 years ago

16.3k
Responsive list with icons

Author:
Prajwal Hallale

3 years ago

10.5k
Users ranking list with points

Author:
Leif99

2 years ago

11.8k
Profile Card

Author:
Mr Robot

3 years ago

11.8k
Todo list in tailwlind

Author:
Kofi Osei

2 years ago

17.1k
Show user details

Author:
Lucas Martinez

3 years ago

25.5k
User profile card with social icons
Showcases a user's profile information along with links to their various social media accounts.

Author:
Simon Scheffer

2 years ago

15.2k
Stacked list

Author:
Odessa Young

2 years ago

19k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

10 months ago

1.9k
Minimal list section

Author:
Task Master

3 years ago

8.6k
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

3 months ago

176
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components