JSFiddle - React, Tailwind, and code Playground

by rikazavr

HTML

<div class="row">

  <div class="item">
    <div class="item__content">
      <h1>
        Item
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <div class="item__hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  </div>
  
  <div class="item">
    <div class="item__content">
      <h1>
        Item
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <div class="item__hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  </div>
  
  <div class="item">
    <div class="item__content">
      <h1>
        Item
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <div class="item__hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  </div>

</div>

<div class="row">

  <div class="item">
    <div class="item__content">
      <h1>
        Item
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </p>
      <div class="item__hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  </div>
  
  <div class="item">
    <div class="item__content">
      <h1>
        Item
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <div class="item__hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  </div>
  
  <div class="item">
    <div class="item__content">
      <h1>
        Item
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <div class="item__hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  </div>

</div>

CSS

body {
  background-color: #c6c6c6;
}

.row {
  position: relative;
  display: flex;
  width: 920px;
  margin-bottom: 20px;
}

.item {
  position: relative;
  width: 230px;
  /* height: 165px; */
  padding-top: 10px;
  background
  cursor: pointer;
}

.item__content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 200px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
}

.item:not(:last-child) {
  margin-right: 20px;
}

.item__hidden {
  display: none;
}

.item:hover .item__hidden {
  display: block;
}

.item__content:hover {
  z-index: 2;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
}