How to make chatbox styling in tailwinds

Question

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

Answer 1

I was able to find an answer. You can pass a function to your ClassName... Create the function:

 function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

Using it to decide which justify:

<div
                            className={classNames(
                              position.name == firstname
                                ? 'justify-end'
                                : 'justify-start',
                              'flex items-center'
                            )}
                      >

and do the same for position.text