Developer-Friendly Tailwind Social Components

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Suggested Friends

<div class="w-full max-w-xs bg-white border border-gray-200 rounded-lg overflow-hidden">
    <div class="p-4">
        <h2 class="text-xl font-semibold">Suggested Friends</h2>
    </div>
    <ul class="divide-y divide-gray-200">
        <li class="flex items-center space-x-4 py-4">
            <img class="w-10 h-10 rounded-full" src="https://placehold.co/40" alt="Profile">
            <div class="text-sm">
                <p class="font-medium">John Doe</p>
                <p class="text-xs text-gray-500">5 Mutual Friends</p>
            </div>
            <button class="ml-auto px-4 py-1 text-xs font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Follow</button>
        </li>
        <li class="flex items-center space-x-4 py-4">
            <img class="w-10 h-10 rounded-full" src="https://placehold.co/40" alt="Profile">
            <div class="text-sm">
                <p class="font-medium">Jane Smith</p>
                <p class="text-xs text-gray-500">3 Mutual Friends</p>
            </div>
            <button class="ml-auto px-4 py-1 text-xs font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Follow</button>
        </li>
        <li class="flex items-center space-x-4 py-4">
            <img class="w-10 h-10 rounded-full" src="https://placehold.co/40" alt="Profile">
            <div class="text-sm">
                <p class="font-medium">Emily White</p>
                <p class="text-xs text-gray-500">8 Mutual Friends</p>
            </div>
            <button class="ml-auto px-4 py-1 text-xs font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Follow</button>
        </li>
    </ul>
</div>

<js-component src="social/suggested_friends"></js-component>

Friends List

View

<div class="w-full max-w-xs mx-auto bg-white p-4 rounded-lg">
    <h2 class="text-lg font-semibold mb-4">Friends</h2>
    <ul class="space-y-3">
        <li class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://placehold.co/40x40" alt="Friend profile">
            <div class="text-sm">
                <p class="font-medium">John Doe</p>
                <p class="text-xs text-gray-500">Online</p>
            </div>
        </li>
        <li class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://placehold.co/40x40" alt="Friend profile">
            <div class="text-sm">
                <p class="font-medium">Jane Smith</p>
                <p class="text-xs text-gray-500">Last seen 1h ago</p>
            </div>
        </li>
        <li class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://placehold.co/40x40" alt="Friend profile">
            <div class="text-sm">
                <p class="font-medium">Bob Johnson</p>
                <p class="text-xs text-gray-500">Offline</p>
            </div>
        </li>
        
    </ul>
</div>

<js-component src="social/friends_list"></js-component>