Creating a Responsive User List Component with Tailwind CSS

I recently worked on a small front-end feature that displays a list of users in a clean and responsive layout using Tailwind CSS. I wanted it to support light and dark themes based on the user's system preferences without needing a toggle button. Here’s how I approached it.

The Goal

My goal was to keep the UI minimal yet functional. The user cards should display a profile image, name, email, and quick action buttons for editing and deleting. I also wanted to include pagination at the bottom and a simple "Add User" icon button at the top.

Why Auto Dark/Light Mode?

Tailwind CSS makes it super simple to implement dark mode. Instead of managing themes manually with a toggle, I decided to let the OS/browser decide. This way, if the user prefers dark mode, the layout just adapts.

The Component Markup

Here's the complete component I built. It's fully responsive and automatically switches between light and dark themes based on system settings.

<!-- Root with auto dark/light mode support -->
<div class="min-h-screen bg-gray-100 p-4 text-gray-800 dark:bg-gray-900 dark:text-gray-100">
  <div class="mx-auto max-w-3xl rounded-xl bg-white p-4 shadow dark:bg-gray-800">
    <!-- Header -->
    <div class="mb-4 flex items-center justify-between">
      <h2 class="text-xl font-semibold">Users</h2>
      <div>
        <!-- Add Button with icon only -->
        <button class="flex cursor-pointer items-center gap-1 rounded bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Users List -->
    <div class="space-y-3">
      <!-- User Card -->
      <div class="flex items-center justify-between rounded-md bg-gray-50 px-3 py-2 shadow-sm dark:bg-gray-700">
        <div class="flex items-center space-x-3">
          <img src="https://i.pravatar.cc/50?img=1" alt="User" class="h-10 w-10 rounded-full" />
          <div>
            <p class="text-sm font-medium">Patan</p>
            <p class="text-xs text-gray-500 dark:text-gray-300">patan@example.com</p>
          </div>
        </div>
        <div class="flex space-x-2">
          <!-- Edit Button with Pencil Icon -->
          <button class="cursor-pointer rounded bg-yellow-500 px-2 py-1 text-xs text-white hover:bg-yellow-600">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16 3l5 5-12 12H3v-5L16 3z" />
            </svg>
          </button>

          <!-- Delete Button with Icon -->
          <button class="cursor-pointer rounded bg-red-500 px-2 py-1 text-xs text-white hover:bg-red-600">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Repeat above for more users if needed -->
    </div>

    <!-- Pagination -->
    <div class="mt-6 flex items-center justify-between text-sm">
      <span>Page 1 of 5</span>
      <div class="flex space-x-2">
        <!-- Previous Button with Icon -->
        <button class="cursor-pointer rounded bg-gray-200 px-3 py-1 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
        </button>

        <!-- Next Button with Icon -->
        <button class="cursor-pointer rounded bg-gray-200 px-3 py-1 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Final Thoughts

This was a fun mini UI project. Tailwind’s utility classes made everything easy to manage. I avoided bloat, stayed mobile-friendly, and leaned on system preferences to handle theme switching—no JavaScript toggle needed.

If you're building a dashboard or admin panel, this type of component is super handy. You can expand it later with dynamic data or integrate it with frameworks like React or Vue.

---

Have feedback or want a React version of this component? Let me know in the comments!