Users ranking list

This tailwind example is contributed by Leif99, on 01-Mar-2023. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 16.9k 18

<div class="bg-white shadow-md rounded-md overflow-hidden max-w-lg mx-auto mt-16">
    <div class="bg-gray-100 py-2 px-4">
        <h2 class="text-xl font-semibold text-gray-800">Top Users</h2>
    </div>
    <ul class="divide-y divide-gray-200">
        <li class="flex items-center py-4 px-6">
            <span class="text-gray-700 text-lg font-medium mr-4">1.</span>
            <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/72.jpg"
                alt="User avatar">
            <div class="flex-1">
                <h3 class="text-lg font-medium text-gray-800">Emily Jones</h3>
                <p class="text-gray-600 text-base">1234 points</p>
            </div>
        </li>
        <li class="flex items-center py-4 px-6">
            <span class="text-gray-700 text-lg font-medium mr-4">2.</span>
            <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/40.jpg"
                alt="User avatar">
            <div class="flex-1">
                <h3 class="text-lg font-medium text-gray-800">David Lee</h3>
                <p class="text-gray-600 text-base">987 points</p>
            </div>
        </li>
        <li class="flex items-center py-4 px-6">
            <span class="text-gray-700 text-lg font-medium mr-4">3.</span>
            <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/54.jpg"
                alt="User avatar">
            <div class="flex-1">
                <h3 class="text-lg font-medium text-gray-800">Sophia Williams</h3>
                <p class="text-gray-600 text-base">876 points</p>
            </div>
        </li>
        <li class="flex items-center py-4 px-6">
            <span class="text-gray-700 text-lg font-medium mr-4">4.</span>
            <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/83.jpg"
                alt="User avatar">
            <div class="flex-1">
                <h3 class="text-lg font-medium text-gray-800">Michael Chen</h3>
                <p class="text-gray-600 text-base">765 points</p>
            </div>
        </li>
        <li class="flex items-center py-4 px-6">
            <span class="text-gray-700 text-lg font-medium mr-4">5.</span>
            <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/17.jpg"
                alt="User avatar">
            <div class="flex-1">
                <h3 class="text-lg font-medium text-gray-800">Mia Davis</h3>
                <p class="text-gray-600 text-base">654 points</p>
            </div>
        </li>
    </ul>
</div>

Related Examples

Stacked list

Odessa Young

3 years ago

19.9k
Twitter like users list

Simon Scheffer

3 years ago

12.8k
Users ranking list with points

Leif99

3 years ago

12.9k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Prajwal Hallale

3 years ago

20.5k
Nested list
A nested list is suitable for a table of contents / navigational list

Noob

4 years ago

21.7k
List of links

Prajwal Hallale

3 years ago

10.3k
List with border

Samuel Dawson

3 years ago

11.6k
Todo list in tailwlind

Kofi Osei

3 years ago

18.1k
Logo cloud

Alok

3 years ago

10.8k
Responsive list
Horizontal list of items

Sophia Baker

3 years ago

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

Junclarkaizen Pagu

2 years ago

8k
List component

Shru hari

2 years ago

3.6k