Untitled

<div className="drawer-content flex items-center justify-center space-x-5 mt-5">
        <div className="space-y-5 bg-black p-4">
          <p className="flex space-x-5 text-xl font-bold mt-1">
            Recent (Global)
          </p>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body bg-white text-black w-10/15 p-3">
              <p className="card-title ">
                [username] wants to play [game name]
              </p>
              <div className="space-x-3 flex mt-1">
                <FaIcons.FaUserFriends className="text-3xl" />
                <p className="font-bold mt-1">3/5</p>
                <FiFlag className="text-2xl mt-1"></FiFlag>
                <p className="font-bold mt-1">[Available roles]</p>
              </div>
              <div className="card-actions justify-end mt-1">
                <button className="btn btn-primary">Decline</button>
                <button className="btn btn-primary">Join</button>
              </div>
            </div>
          </div>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body bg-white text-black w-10/15 p-3">
              <p className="card-title ">
                [username] wants to play [game name]
              </p>
              <div className="space-x-3 flex mt-1">
                <FaIcons.FaUserFriends className="text-3xl" />
                <p className="font-bold mt-1">3/5</p>
                <FiFlag className="text-2xl mt-1"></FiFlag>
                <p className="font-bold mt-1">[Available roles]</p>
              </div>
              <div className="card-actions justify-end">
                <button className="btn btn-primary">Decline</button>
                <button className="btn btn-primary">Join</button>
              </div>
            </div>
          </div>
        </div>
        <div className="space-y-5 bg-black p-4">
          <p className="flex space-x-5 text-xl font-bold mt-1">
            Plying Now (Based on user preferences)
          </p>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body bg-white text-black w-10/15 p-3">
              <p className="card-title ">
                [username] wants to play [game name]
              </p>
              <div className="space-x-3 flex mt-1">
                <FaIcons.FaUserFriends className="text-3xl" />
                <p className="font-bold mt-1">3/5</p>
                <FiFlag className="text-2xl mt-1"></FiFlag>
                <p className="font-bold mt-1">[Available roles]</p>
              </div>
              <div className="card-actions justify-end mt-1">
                <button className="btn btn-primary">Decline</button>
                <button className="btn btn-primary">Join</button>
              </div>
            </div>
          </div>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body bg-white text-black w-10/15 p-3">
              <p className="card-title ">
                [username] wants to play [game name]
              </p>
              <div className="space-x-3 flex mt-1">
                <FaIcons.FaUserFriends className="text-3xl" />
                <p className="font-bold mt-1">3/5</p>
                <FiFlag className="text-2xl mt-1"></FiFlag>
                <p className="font-bold mt-1">[Available roles]</p>
              </div>
              <div className="card-actions justify-end">
                <button className="btn btn-primary">Decline</button>
                <button className="btn btn-primary">Join</button>
              </div>
            </div>
          </div>
        </div>
      </div>