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

11.8k

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

16k
Responsive list with icons

Author:
Prajwal Hallale

2 years ago

10.5k
Users ranking list with points

Author:
Leif99

2 years ago

11.7k
Profile Card

Author:
Mr Robot

3 years ago

11.6k
Todo list in tailwlind

Author:
Kofi Osei

2 years ago

16.7k
Show user details

Author:
Lucas Martinez

2 years ago

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

15k
Stacked list

Author:
Odessa Young

2 years ago

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

8 months ago

1.6k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

5 months ago

817
Visernic Profile

Author:
MD Mostafa Niloy

3 weeks ago

153
card
best responsive tailwind card

Author:
irahoza daniel

6 months ago

563

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components