JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container d-flex justify-content-center align-items-center">
  <div class="card" style="width: 18rem">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
      <p class="card-text">
        Some quick example text to build on the card title and make up the bulk
        of the card's content.
      </p>
	  <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
      <button id="btn" class="btn btn-secondary">Button</button>
    </div>
  </div>
</div>

CSS

body {
	.container {
		min-height: 100vh;
	}
	
}

JavaScript

const btn = document.querySelector("#btn")
btn.innerHTML = `<dotlottie-player src="https://lottie.host/1419a6d2-9454-46bc-af8d-1caa7ecad149/7iAPFrXfc4.json" background="transparent" speed="1" style="height: 20px;" loop autoplay></dotlottie-player>`