Home
Leif99
Users ranking list

Users ranking list

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

List

Author Leif99

14.3k

Fork Fullscreen

<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