JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<div class="container">
<reformed-logo>
  <img src="https://reformedtech.org/images/logo.png" width="200px" hegith="100px" >
</reformed-logo>
</div>

CSS

.container {
  max-width: 500px;
}

JavaScript

const template = document.createElement('template');
template.innerHTML = '<style> :host{display: block;}</style><slot />';
template.cssText = 'textWeight: blod';
class ReformedLogo extends HTMLElement{
	constructor(){
  	super();
    this.attachShadow({
    	mode: 'open'
    })   
  }
  connectedCallback(){
	this.shadowRoot.appendChild(template.content.cloneNode(true)
  );
  this.animate([
  // keyframes
  { transform: 'scale(0) rotate(0deg)' }, 
  { transform: 'scale(1) rotate(1080deg)' }
], { 
  // timing options
  duration: 1000,
  easing: 'cubic-bezier(0, 0.6, 0.3, 1)'
})
  }
}
customElements.define('reformed-logo', ReformedLogo)