JSFiddle - React, Tailwind, and code Playground

by tiffk935

HTML

<div class="wrapper">
  <div class="grid">
    <div class="image"></div>
    <div class="text">
      <div class="shortline"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
  <div class="grid">
    <div class="image"></div>
    <div class="text">
      <div class="shortline"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
  <div class="grid">
    <div class="image"></div>
    <div class="text">
      <div class="shortline"></div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
  </div>
</div>

CSS

body {
    background: #e9e9e9;
}
.wrapper {
    margin: 30px;
    padding: 30px;
    background: #fff;
    width: 360px;
    margin: auto;
}
.grid:not(:last-child) {
    margin-bottom: 30px;
}
.image {
    height: 60px;
    width: 60px;
    display: inline-block;
}
.text {
    margin-left: 20px;
    display: inline-block;
}
.shortline {
    height: 10px;
    width: 80px;
    margin: 4px 0;
}
.line {
    height: 10px;
    width: 230px;
    margin: 4px 0;
}
.image, .shortline, .line {
    background: #F6F6F6;
    background: linear-gradient(to right, #d4d4d4 8%, #e4e2e2 18%, #d4d4d4 33%);
    background-size: 800px 104px;
}

JavaScript

/**
* ONLY HTML & CSS
*/