"Utilize Tailwind to effortlessly place a single item at the center

Question

"Utilize Tailwind to effortlessly place a single item at the center

Looking for a way to align a row of items with one item centered in the div and the others positioned on either side while maintaining their original order?

Check out this code snippet:

<div className="flex mx-auto justify-center items-center">
  <Circle selected={selected === ActionOptions.NONE} onClick={e => setSelected(ActionOptions.NONE)} title="None" />
  <Circle selected={selected === ActionOptions.ICON} onClick={e => setSelected(ActionOptions.ICON)} title="Icon">
    {Icon(Icons.CHECK, selected === ActionOptions.ICON ? 'w-20 h-20' : 'w-8 h-8')}
  </Circle>
  <Circle selected={selected === ActionOptions.EMOJI} onClick={e => setSelected(ActionOptions.EMOJI)} title="Emoji">
    {Icon(Icons.SMILE, selected === ActionOptions.EMOJI ? 'w-20 h-20' : 'w-8 h-8')}
  </Circle>
  <Circle selected={selected === ActionOptions.TIMER} onClick={e => setSelected(ActionOptions.TIMER)} title="Timer">
    <ClockIcon className={selected === ActionOptions.TIMER ? 'w-20 h-20' : 'w-8 h-8'} />
  </Circle>
</div>

function Circle({
  selected,
  children,
  onClick,
  title,
}: PropsWithChildren<{ selected: boolean; onClick: (e) => void; title: string }>) {
  return (
    <div className="flex flex-col items-center justify-center cursor-pointer">
      <div
        onClick={onClick}
        className={`rounded-full flex justify-center items-center ${
          selected ? 'w-32 h-32 border-4' : 'w-14 h-14 border-2'
        } mx-2  border-white bg-white/10`}
      >
        {children}
      </div>
      <span className="text-xs">{title}</span>
    </div>
  );
}

Does anyone have suggestions on how to achieve this layout design?

css reactjs tailwind-css

Answer 1

Answer №1

It seems like there may be some confusion about your request, but one possible solution could involve adjusting the flex-order in the following way:

const Shapes = [
  { name: 'Square', size: BoxOptions.SMALL, alignment: 1 },
  { name: 'Circle', size: BoxOptions.MEDIUM, alignment: 1 },
  { name: 'Triangle', size: BoxOptions.LARGE, alignment: 3 },
  { name: 'Hexagon', size: BoxOptions.XLARGE, alignment: 3 },
]

export default function Container() {
  const [selectedShape, setSelectedShape] = useState<BoxOptions>();

  return (
    <div className="flex mx-auto justify-center items-center transition-all duration-1000">
      {Shapes.map(({ name, size, alignment }) => {
        return (
          <Shape
            key={name}
            selected={selectedShape === size}
            onClick={() => setSelectedShape(size)}
            name={name}
            alignment={alignment}
          >
            <div>{size}</div>
          </Shape>
        );
      })}
    </div>
  );
}

export function Shape({ selected, children, onClick, name, alignment }) {
  return (
    <div
      className={`item flex flex-col items-center justify-center cursor-pointer ${
        selected ? `order-2` : `order-${alignment}`
      }`}
    >
      <div
        onClick={onClick}
        className={`rounded-full flex justify-center items-center ${
          selected ? 'w-32 h-32 border-4' : 'w-14 h-14 border-2'
        } mx-2  border-black bg-white/10`}
      >
        {children}
      </div>
      <span className="text-xs">{name}</span>
    </div>
  );
}

Answer 2

It seems like there may be some confusion about your request, but one possible solution could involve adjusting the flex-order in the following way:

const Shapes = [
  { name: 'Square', size: BoxOptions.SMALL, alignment: 1 },
  { name: 'Circle', size: BoxOptions.MEDIUM, alignment: 1 },
  { name: 'Triangle', size: BoxOptions.LARGE, alignment: 3 },
  { name: 'Hexagon', size: BoxOptions.XLARGE, alignment: 3 },
]

export default function Container() {
  const [selectedShape, setSelectedShape] = useState<BoxOptions>();

  return (
    <div className="flex mx-auto justify-center items-center transition-all duration-1000">
      {Shapes.map(({ name, size, alignment }) => {
        return (
          <Shape
            key={name}
            selected={selectedShape === size}
            onClick={() => setSelectedShape(size)}
            name={name}
            alignment={alignment}
          >
            <div>{size}</div>
          </Shape>
        );
      })}
    </div>
  );
}

export function Shape({ selected, children, onClick, name, alignment }) {
  return (
    <div
      className={`item flex flex-col items-center justify-center cursor-pointer ${
        selected ? `order-2` : `order-${alignment}`
      }`}
    >
      <div
        onClick={onClick}
        className={`rounded-full flex justify-center items-center ${
          selected ? 'w-32 h-32 border-4' : 'w-14 h-14 border-2'
        } mx-2  border-black bg-white/10`}
      >
        {children}
      </div>
      <span className="text-xs">{name}</span>
    </div>
  );
}

"Utilize Tailwind to effortlessly place a single item at the center

Answer №1

Similar questions

Creating a table in React using an object with nested objects

Switch the scroll direction in the middle of the page and then switch it back

What is the best way to remove a CSS style using JavaScript?

Tips for customizing the scrollbar design in iOS Safari

Facing a react-native-camera issue during android compilation

I am unable to view the product even though its ID is visible in the URL

What is the best way to format text in React without using spaces?

Is there a way to make a single background image the frame for each individual post on a tumblr theme?

Adding Google Ads to a page with changing content using Next.js and React

What advantage does React gain by utilizing the previous state to update state instead of the current state?

Creating an interactive /robots.txt file for a Next.js application

Update the next-auth session object once the user has been successfully updated through a patch request

Slide content horizontally to align with the opening and closing of the Drawer component in Material-UI

A missing semicolon is encountered while compiling a React application

Overflow is causing interference with the scrollY value

Verify that the text entered in the form is accurate, and if it meets the required criteria, proceed to the next

The next.js script malfunctions once the router has been altered

The ReactJS Material UI inputbase component is not correctly extracting the input value

After props have been passed, the ReactJS ComponentWillMount() function is triggered

What is the easiest way to set up a local server for deployment?