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></user-card>

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 image = document.createElement( 'img' );
    image.src = 'https://semantic-ui.com/images/avatar2/large/patrick.png';
    image.classList.add( 'image' );
    
    var container = document.createElement( 'div' );
    container.classList.add( 'container' );
    
    var name = document.createElement( 'p' );
    name.classList.add( 'name' );
    name.innerText = 'User Name';
    
    var email = document.createElement( 'p' );
    email.classList.add( 'email' );
    email.innerText = '[email protected]';
    
    var button = document.createElement( 'button' );
    button.classList.add( 'button' );
    button.innerText = 'Follow John';
    
    container.append( name, email, button );
    
    this.append( image, container );
  }
}

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