JSFiddle - React, Tailwind, and code Playground

HTML

<user-list url="https://jsonplaceholder.typicode.com/users">Loading user list...</user-list>

JavaScript

'use strict';

class UserList extends HTMLElement {
  createdCallback() {
    this.createShadowRoot().innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        .list {
  				display: grid;
        	grid-template-columns: 1fr 1fr 1fr 1fr;
        }
        
        user-list-item {
        	padding: 1em;
          border: 1px solid #ccc;
        }
        
        user-list-item h4 {
        	margin-bottom: 0;
        }
        
        user-list-item span {
        	display: block;
        }
      </style>
      <div class="list"></div>
      <template>
      	<user-list-item user=''></user-list-item>
      </template>
    `;
    
    this.list = this.shadowRoot.querySelector('.list');
    this.template = this.shadowRoot.querySelector('template');
    this.updateList();
  }
  
  get url() {
    return this.getAttribute('url');
  }

  set url(val) {
    this.setAttribute('url', val);
    this.updateList();
  }
  
  updateList() {
    if (!this.url) {
      return;
    }

    return fetch(this.url)
    	.then((response) => response.json())
      .then((users) => {
        users.forEach((user) => {
        	const item = this.template.content.cloneNode(true);
          item.lastElementChild.setAttribute('user', user.id);
          item.lastElementChild.innerHTML = `<h4>${user.name}</h4>
          <span>${user.email}</span>
          <span>${user.address.suite}, ${user.address.street}</span>
          <span>${user.address.zipcode}</span>`;
          
        	this.list.appendChild(item);
        });
      });
  }
  
}

document.registerElement('user-list', UserList);