Div transform scale but only for container (react & tailwind)

Question

I have some code that looks like this:

const [selectedNum, setSelected] = useState(0)
let cards = [
     {title: "1", description: "asdf"},{title: "2", description: "fdas"}
]    


return(
<div className="flex flex-wrap">

{cards.map((card, id)=>{
    return(<CardObjectHere className={`${id == selectedNum ? 'scale-150': 'scale-100'}`} />)
})}
</div>
)

I want to be able to scale the background of the div, since I want to display more information on the div when it is selected. There are several problems I have with using transforms:

1. it squishes rounded corners
2. it scales text as well (I've looked at scaling the text the opposite direction, but it doesn't really work)

I'm really looking for an alternative to transforms to scale a div's border without displacing nearby divs.

Thank you!

Answer 1

Consider having an absolutely positioned element underneath as the background. This lets you scale it without affecting the content:

function CardObjectHere({ className }) {
  return (
    <div className="relative z-0">
      Foo
      <div className={`absolute -z-10 inset-0 bg-red-300/50 ${className}`} />
    </div>
  );
}

function App() {
  const [selectedNum, setSelected] = React.useState(0)
  let cards = [
    {title: "1", description: "asdf"},{title: "2", description: "fdas"}
  ]
  
  return (
    <div className="flex flex-wrap">
      {cards.map((card, id) => {
        return (
          <CardObjectHere className={`${id == selectedNum ? 'scale-150': 'scale-100'}`} />
        )
      })}
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="app"></div>