flex.jsx

import "./styles.css";

export default function App() {
  return (
    <div className="App" style={{ width: 400 }}>
      <div class="w-full cursor-pointer bg-primary p-2 hover:bg-primary-hover">
        <div class="flex justify-between gap-4">
          <div class="flex items-center flex-grow min-w-0 ">
            <div class="flex items-center justify-center rounded-full bg-grey h-8 w-8 ring-[3px] ring-amber flex-shrink-0">
              <img
                alt="avatar-Saurav Hershey GM"
                class="h-full w-full rounded-full object-cover"
                src="blob:http://localhost:4000/30ea8da7-1326-4d6e-aee1-5f6329582279"
              />
            </div>
            <div class="flex flex-col justify-start min-w-0 ml-2">
              <p
                class="text-xs font-medium text-primary truncate"
                title="Saurav Hershey GM"
              >
                Saurav Hershey GM Saurav Hershey GM
              </p>
              <p
                class="text-xs font-light truncate text-secondary"
                title="Management"
              >
                Management
              </p>
            </div>
          </div>
          <div class="min-w-0">
            <p
              class="text-xs font-medium truncate text-primary"
              title="No Location"
            >
              Mezzannine Room, Floor 1
            </p>
            <p class="text-xs font-light text-secondary"></p>
          </div>
        </div>
      </div>
    </div>
  );
}