How to Make Chatbox Styling in Tailwinds

I'm trying to create a chat box style, whilst using map to fill data

Currently items just go downward and inline. What I would like is the staggered effect that you would receive if you were sending a text or messaging through an app.

I believe justify-start and justify-end change the code but I'm unsure of how to make the CSS dynamic.

My code looks like this:

import React from 'react'

type Props = {}

export default function test({}: Props) {
  const positions = [
    {
      id: 1,
      text: 'Hey all',
      name: 'Ryan',
    },
    {
      id: 2,
      text: 'Hi wassup?',
      name: 'Jim',
    },
    {
      id: 3,
      text: 'yo yo',
      name: 'Lex',
    },
  ]
  return (
    <>
      <div className="overflow-hidden rounded-md bg-white shadow">
        <ul role="list" className="divide-y divide-gray-200">
          {positions.map((position) => (
            <li key={position.id}>
              <a className="block hover:bg-gray-50">
                <div className="px-4 py-4 ">
                  <div className="flex items-center justify-start">
                    <p className="truncate text-sm font-medium text-indigo-600">
                      {position.name}
                    </p>
                  </div>
                  <div className="mt-2 flex justify-start">
                    <div className="sm:flex">
                      <p className="flex text-sm text-gray-500">
                        {position.text}
                      </p>
                    </div>
                  </div>
                </div>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </>
  )
}

Any help is appreciated