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

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.4k
Users ranking list with points

Author:
Leif99

2 years ago

11.7k
Profile Card

Author:
Mr Robot

3 years ago

11.5k
Todo list in tailwlind

Author:
Kofi Osei

2 years ago

16.5k
Show user details

Author:
Lucas Martinez

2 years ago

25k
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.8k
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

7 months ago

1.4k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

6 days ago

113
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

1.1k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

2 weeks ago

116

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components