JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700&display=swap" rel="stylesheet">

<user-card
  image="https://semantic-ui.com/images/avatar2/large/patrick.png"
  name="User Name"
  email="[email protected]"
></user-card>

<template id="userCardTemplate">
  <img src="" class="image">
  <div class="container">
    <p class="name"></p>
    <p class="email"></p>
    <button class="button">Follow John</button>
  </div>
</template>

CSS

user-card {
  display: flex;
  align-items: center;
  width: 450px;
  height: 180px;
  background-color: #d4d4d4;
  border: 1px solid #d5d5d5;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

user-card>.image {
  flex: 0 0 auto;
  width: 160px;
  height: 160px;
  vertical-align: middle;
  border-radius: 5px;
}

user-card>.container {
  box-sizing: border-box;
  padding: 20px;
  height: 160px;
}

user-card>.container>.name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  margin-bottom: 5px;
}

user-card>.container>.email {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1;
  margin: 0;
  margin-bottom: 15px;
}

user-card>.container>.button {
  padding: 10px 25px;
  font-size: 12px;
  border-radius: 5px;
  text-transform: uppercase;
}

JavaScript

// create user card class
class UserCard extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    var templateElem = document.getElementById( 'userCardTemplate' );
    var content = templateElem.content.cloneNode( true );
    
    content.querySelector( 'img' ).setAttribute( 'src', this.getAttribute('image') );
    content.querySelector( '.container>.name' ).innerText = this.getAttribute('name');
    content.querySelector( '.container>.email' ).innerText = this.getAttribute('email');
    
    this.appendChild( content );
  }
}

// define user card element
customElements.define('user-card', UserCard);