JSFiddle - React, Tailwind, and code Playground

by Tobias Mesquita

HTML

<div id="lorem">
  Illo qui facere temporibus ut adipisicing pariatur
</div>

CSS

#lorem {
  background-color: white;
  border-radius: 2px;
  box-shadow: 0px 0px 5px black;
  padding: 2px;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  transition-property: width;
  transition-duration: 1s;
}

#lorem:hover {
  width: 100%;
}