JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

CSS

body {
  margin: 0;
}

.wrapper {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 20px;
}

.element {
  width: 25vw;
  height: 100px;
  background-color: blue;
}

.element.opened {
  background: red;
}

.content {
  width: 100%;
  height: 250px;
  position: absolute;
  top: 160px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 32px;
}

Babel + JSX

const Card = ({ index, onClick, opened, color, text }) => (
  <div>
    <div
      className={`element ${opened ? 'opened' : ''}`}
      data-index={index}
      onClick={onClick}
    ></div>
    {opened
      ? <div className="content" style={{ background: color }}>{text}</div>
      : null
    }
  </div>
);

const Cards = ({ cards }) => {
  const [ opened, setOpened ] = React.useState(null);

  const onClick = e => {
    const index = +e.target.dataset.index;
    setOpened(index === opened ? null : index);
  };

  return (
    <div className="wrapper">
      {cards.map((n, i) => <Card
        {...n}
        index={i}
        opened={i === opened}
        onClick={onClick}
      />)}
    </div>
  );
};

ReactDOM.render(<Cards
  cards={[
    { color: 'orange', text: 'hello, world!!' },
    { color: 'green', text: 'fuck the world' },
    { color: '#8401af', text: 'fuck everything' },
  ]}
/>, document.getElementById('app'));