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