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

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
}

import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion,useAnimationControls,LayoutGroup} from "https://esm.sh/framer-motion@10.2.2";




const App = function() {
  
  const [isBig,setBigState] = useState(false)
  
  return (
    <div style={{
        display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',

      }}>
     
      <motion.div
        
        style={{

          backgroundColor:'#FFFFFF88',
          borderRadius:'10px',
          display:'flex',
          alignItems:'center', 
          justifyContent: 'center',
          padding:10,
            gap:10
        }}
        layout
      >
       <LayoutGroup>
        <motion.div
          layout
            style={{
            width:isBig?200:60,
            height:60,
             backgroundColor:'white',
            borderRadius:10,
              display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
          fontFamily:'system-ui',
            color:'gray'
          }}
          onTap={()=>{
            setBigState(!isBig)
          }}
          >
          
          <motion.span  layout>click</motion.span>
        </motion.div>
         <motion.div
            layout
            style={{
            width:60,
            height:60,
            backgroundColor:'white',
            borderRadius:10,
          }}
          >
          
          
        </motion.div>
        <motion.div
          layout
            style={{
            width:60,
            height:60,
            backgroundColor:'white',
            borderRadius:10,
          }}
          >
          
          
        </motion.div>
         </LayoutGroup>
    </motion.div>
  
      
      
    </div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)