JSFiddle - React, Tailwind, and code Playground

by Raloynner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>

CSS

.container {
  display: flex;
  height: 200px;
}

.box {
  flex: 1;
  cursor: pointer;
  transition: all .3s ease-in;
}

.selected {
  flex: 2;
}

React

const { useState, useEffect } = React;

const App = () => {
  const [divs,] = useState(['blue', 'green', 'black']);
  const [selected, setSelected] = useState(null);
  
  const onClick = (id) => {
    setSelected(id);
  }
  
  return <div className="container">
    {divs.map(pr => <div key={pr} style={{background: pr}} className={`box ${pr === selected ? 'selected' : ''}`} onClick={() => onClick(pr)}></div>)}
  </div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );