Developer-Friendly Tailwind Social Components

Latest Tailwind Components

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

Message Inbox

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

Notification Center

<div class="relative" x-data="{ open: false }">
    <button @click="open = !open" class="bg-blue-600 text-white px-4 py-2 rounded-md">
        Notifications
    </button>
    <div x-show="open" class="absolute right-0 mt-2 w-80 rounded-md bg-white border border-gray-200">
        <ul class="divide-y divide-gray-200">
            <li class="py-4 px-6 flex items-start">
                <img class="h-10 w-10 rounded-full" src="https://placehold.co/40" alt="Avatar">
                <div class="ml-4">
                    <p class="text-black">John Doe liked your post</p>
                    <span class="text-gray-500 text-sm">2 hours ago</span>
                </div>
            </li>
            <li class="py-4 px-6 flex items-start">
                <img class="h-10 w-10 rounded-full" src="https://placehold.co/40" alt="Avatar">
                <div class="ml-4">
                    <p class="text-black">Jane Smith commented: "Awesome!"</p>
                    <span class="text-gray-500 text-sm">5 hours ago</span>
                </div>
            </li>
            <li class="py-4 px-6 flex items-start">
                <img class="h-10 w-10 rounded-full" src="https://placehold.co/40" alt="Avatar">
                <div class="ml-4">
                    <p class="text-black">Alex Johnson followed you</p>
                    <span class="text-gray-500 text-sm">1 day ago</span>
                </div>
            </li>
        </ul>
    </div>
</div>

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