"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

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Is there a way to programmatically remove row selection in a materialUI table?

There was an issue with the SidebarController function being undefined, as it was expected to be a function

Expanding the flexbox container to accommodate additional divs when they are added

Styling problem arises on IOS devices due to rounded corners affecting select box

Creating a new array set by utilizing the map method

Integrate the element offset into jQuery's offset calculations

Issue with Custom Dropdown input not triggering blur event

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

How to eliminate arrow icons from Bootstrap Carousel

Firefox experiencing issues with loading background images

Troubles with Bootstrap's column functionality causing issues

Troubleshooting Floating Divs in ExtJs TreePanel Component

Embedding a TypeScript React component within another one

Issue with utilizing the useDisclouse() function in Chakra UI within a forEach iteration

Utilizing Array properties within a JavaScript class

Hidden menu does not work with Jquery

Ways to troubleshoot issues with installing expo-cli

How should one correctly align various classes in a cascading manner within CSS?

The customized styling for Material Angular does not seem to properly apply to <md-card> elements within ui-views