Developer-Friendly Tailwind Social Components

Create Post Form

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