JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div class="container">
  <div class="item">
    <div class="content">
      <span>Hello!</span>
    </div>
    <div class="actions">
      Here we go!
    </div>
  </div>
  <div class="item">
    <div class="content">
      <span>Hello!</span>
    </div>
    <div class="actions">
      Here we go!
    </div>
  </div>
  <div class="item">
    <div class="content">
      <span>Hello!</span>
    </div>
    <div class="actions">
      Here we go!
    </div>
  </div>
</div>

CSS

body {
  padding: 80px;
  position: relative;
  z-index: 3;
}

.container {
   display: grid;
   width: 400px;
   overflow: hidden;
  
   border: 1px solid black;
 }

.item {
  display: grid;
  grid-template-columns: 100% 60px;
  height: 60px;
  
  transition:all .2s ease-out;
}

.item:hover {
  transform: translateX(-60px);
}