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 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

1 Answer

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