JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="review" tabindex="0">
  <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
  <p>Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue.

Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

SCSS

$review-text-line-height: 20px;
$review-text-row-visible: 2;
$review-text-preview-height: ($review-text-line-height * $review-text-row-visible);

body {
  padding: 10%;
}

.review {
  background: #fff;
  cursor: pointer;

  h4 {
    padding: 5px 10px;
    border-bottom: 1px solid #aaa;
  }
  p {
    padding: 0 10px;
  }

  h4 {}
  p {
    height: $review-text-preview-height;
    line-height: $review-text-line-height;
    overflow: hidden;
    transition: height 200ms ease;
  }
  
  &:focus {
    p {
      height: 100%;
    }
  }
}