Tailwind CSS Profile Card

Based on: https://twitter.com/steveschoger/status/981606881255976961

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div id="app"></div>

React

function MyApp () {
const [isMinimized, setIsMinimized] = React.useState(false);

		return(
    <div>
      <div className={`${isMinimized ? 'w-16' : '2xl:w-80 w-56'} relative bg-black duration-1000 transition-width ease-in-out`}>
      MY DIV
      </div>
      <button onClick={() => setIsMinimized(!isMinimized)}>CLICK</button>
    </div>
    )
}

ReactDOM.render(<MyApp />, document.querySelector("#app"))