JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<div class="container">
  <a class="product" href="https://cdpn.io/ryanmclaughlin/debug/ee848fa90e96902f0fc66be5df99e9ac">
    <figure class="product-image">
      <img src="https://images.unsplash.com/photo-1516646255117-f9f933680173?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=dc874984018a4253ba7d2a3c53387135" alt="A cloud day at a mountain base">
    </figure>
    <div class="product-detail">
      <h3 class="product-title">Product name</h3>
      <p class="product-description">Lorem ipsum dolor id odit, quos eaque nemo, dicta quidem eum eligendi.</p>
    </div>
  </a>
</div>

SASS

$border-color: #dae1e7
// $background-color: #f4f4f4
$background-color: #000
$text-color: #333

html
  font-size: 16px

body
  background: $background-color
  margin: 0
  padding: 0
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue
  color: $text-color

.container
  margin: 2rem auto
  max-width: 800px
  display: flex
  justify-content: center

.product
  color: $text-color
  text-decoration: none
  overflow: hidden
  background: white
  border-radius: .5rem
  max-width: 380px
  width: 380px
  display: flex
  flex-direction: row
  box-shadow: 0 15px 30px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,.05)
  transition: ease box-shadow 0.3s
  padding: 1rem
  
  &:hover
    box-shadow: 0 15px 60px 0 rgba(0,0,0,0.08), 0 5px 25px 0 rgba(0,0,0,.08)


.product-detail
  margin-left: 1rem
  flex: 1
  
  h3 
    font-size: 1rem
    margin: 0 0 0.325rem 0
  
  p
    line-height: 1.5
    margin: 0
    font-size: 0.875rem


.product-image
  flex-shrink: 0
  margin: 0
  padding: 0
  height: 64px
  width: 64px
  overflow: hidden
  border-radius: 0.25rem
  
  img
    width: 64px
    height: 64px
    object-fit: cover

.loading
  position: relative
  background-color: #f4f4f4
  border-radius: 0.25rem

  &::after
    display: block
    content: ''
    position: absolute
    width: 200%
    height: 100%
    transform: translateX(-100%)
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent)
    animation: loading 1.5s infinite


@keyframes loading
  100%
    transform: translateX(50%)


.product-title.loading
  height: 1rem

.product-description.loading
  height: calc(0.875 * 3rem)