userlist.jsx

const UserList = () => {
  const users = [
    { id: 1, number: "+93845533", email: "shet@example.com" },
    { id: 2, number: "+93845533", email: "jane@example.com" },
    { id: 3, number: "+93845533", email: "alice@example.com" },
    { id: 4, number: "+93845533", email: "bob@example.com" }
  ];

  return (
    <div className="p-4">
      <div className="border p-4 rounded-lg shadow-md bg-white">
        <h2 className="text-xl font-bold mb-4">User List</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {users.map((user) => (
            <div key={user.id} className="border p-4 rounded-lg shadow-md bg-gray-100">
              <h2 className="text-lg font-semibold">{user.name}</h2>
              <p className="text-gray-600">{user.email}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default UserList;