Developer-Friendly Tailwind Social Components

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>

Suggested Friends

View

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

User Profile Page

View

<div class="container mx-auto p-6">
  <div class="flex flex-col sm:flex-row items-center sm:items-start">
    <img src="https://placehold.co/150" alt="Profile Picture" class="rounded-full w-32 h-32 mb-4 sm:mb-0 sm:mr-6">
    <div class="text-center sm:text-left">
      <h1 class="text-2xl font-semibold">John Doe</h1>
      <p class="text-sm mt-2">Software Developer at TechCorp. Passionate about technology and open source. Loves traveling and photography.</p>
    </div>
  </div>

<div class="mt-8">
    <h2 class="text-xl font-semibold mb-4">Posts</h2>
    <ul>
      <li class="border-t py-4">
        <h3 class="font-medium">My Journey into Coding</h3>
        <p class="text-sm text-gray-500">Published on January 15, 2023</p>
      </li>
      <li class="border-t py-4">
        <h3 class="font-medium">Exploring the World of AI</h3>
        <p class="text-sm text-gray-500">Published on February 20, 2023</p>
      </li>
      <li class="border-t py-4">
        <h3 class="font-medium">Photography Tips for Beginners</h3>
        <p class="text-sm text-gray-500">Published on March 5, 2023</p>
      </li>
      
    </ul>
  </div>
</div>

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

Comment Section

View

<div class="max-w-2xl mx-auto mt-8">
  <h3 class="text-xl font-semibold mb-4">Comments</h3>
  <div class="space-y-4">
    
    <div class="flex items-start space-x-2">
      <img src="https://placehold.co/48x48" alt="User avatar" class="w-12 h-12 rounded-full">
      <div class="flex-1">
        <textarea class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Add a comment..." rows="3"></textarea>
        <div class="flex justify-end mt-2">
          <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Post</button>
        </div>
      </div>
    </div>
    
    <div class="space-y-4">
      <div class="flex items-start space-x-2">
        <img src="https://placehold.co/48x48" alt="User avatar" class="w-12 h-12 rounded-full">
        <div>
          <div class="bg-gray-100 p-3 rounded-lg">
            <p class="font-semibold">Username</p>
            <p class="mt-1">This is a user comment. It can be multiple lines, but will adjust according to the content.</p>
          </div>
          <div class="text-sm text-gray-600 mt-1">Posted 2 hours ago</div>
        </div>
      </div>
      <div class="flex items-start space-x-2">
        <img src="https://placehold.co/48x48" alt="User avatar" class="w-12 h-12 rounded-full">
        <div>
          <div class="bg-gray-100 p-3 rounded-lg">
            <p class="font-semibold">Another User</p>
            <p class="mt-1">Another example of a comment left by a different user.</p>
          </div>
          <div class="text-sm text-gray-600 mt-1">Posted 3 hours ago</div>
        </div>
      </div>
    </div>
  </div>
</div>

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

Create Post Form

View

<div class="max-w-xl mx-auto p-4 border rounded-lg space-y-4">
    <form>
        <div class="space-y-2">
            <label for="postTitle" class="block text-sm font-medium">Post Title</label>
            <input type="text" id="postTitle" class="w-full border p-2 rounded" placeholder="Enter your post title"/>
        </div>
        <div class="space-y-2">
            <label for="postContent" class="block text-sm font-medium">Content</label>
            <textarea id="postContent" class="w-full h-32 border p-2 rounded" placeholder="Write your post content here..."></textarea>
        </div>
        <div class="space-y-2">
            <label class="block text-sm font-medium">Upload Image</label>
            <input type="file" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"/>
        </div>
        <div class="space-y-2">
            <label for="tags" class="block text-sm font-medium">Tags</label>
            <input type="text" id="tags" class="w-full border p-2 rounded" placeholder="Enter tags, separated by commas"/>
        </div>
        <div class="flex justify-end pt-2">
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Submit</button>
        </div>
    </form>
</div>

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

Post Card

View

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

Post Feed

View

<div class="flex flex-col items-center w-full h-screen overflow-y-auto bg-gray-50">
  <div class="w-full max-w-lg px-4 mt-4">
    <template x-for="post in posts" :key="post.id">
      <div class="bg-white rounded-lg mb-4 p-4">
        <div class="flex items-center mb-3">
          <img :src="post.user.profilePicture" alt="User Profile" class="w-10 h-10 rounded-full">
          <div class="ml-3">
            <p class="font-semibold">{{ post.user.name }}</p>
            <p class="text-xs text-gray-600">{{ post.createdAt }}</p>
          </div>
        </div>
        <p class="mb-3">{{ post.content }}</p>
        <img :src="post.image" alt="Post Image" class="w-full rounded-md" x-show="post.image">
      </div>
    </template>
  </div>
</div>

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

Search Bar

View

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