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

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

3 years ago

16.4k
Responsive list with icons

Author:
Prajwal Hallale

3 years ago

10.5k
Users ranking list with points

Author:
Leif99

3 years ago

11.9k
Profile Card

Author:
Mr Robot

3 years ago

11.9k
Todo list in tailwlind

Author:
Kofi Osei

3 years ago

17.3k
Show user details

Author:
Lucas Martinez

3 years ago

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

Author:
Simon Scheffer

3 years ago

15.3k
Stacked list

Author:
Odessa Young

2 years ago

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

1 year ago

1.9k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

3 years ago

10.9k
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

2 years ago

7.3k
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

8 months ago

833

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components