JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="users">

</div>

SCSS

body {
  font-family: sans-serif;
  font-size: 16px;
}

.users {
  max-width: 450px;
  margin: 0 auto;
}

.user {
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  h2 {
    font-size: 1.2rem;
    margin-bottom: .25rem;
    text-transform: uppercase;
    letter-spacing: .05rem;
  }
  span {
    color: #ccc;
    line-height: 1.5;
  }
  &:not(:last-of-type) {
    margin-bottom: 1rem;
  }
}

JavaScript

const data = async () => {
  const req = await fetch('https://jsonplaceholder.typicode.com/users')
  const res = await req.json()

  res.forEach(res => {
    document
      .querySelector('.users')
      .insertAdjacentHTML('beforeend', `
  	<div class="user">
    	<h2>${res.name}</h2>
      <span>${res.email}</span>
      <span>${res.phone}</span>
      <span>${res.website}</span>
     </div>
    `)
  })
}



data()