Tailwind CSS Large filled buttons - Icon and Text by Creative Tim

by CreativeTim

HTML

<link rel="stylesheet" href="https://gitcdn.link/cdn/creativetimofficial/public-assets/master/tailwind-starter-kit/jsfiddle-style.css">
<div class="p-4">
  <h1 class="font-semibold mt-8 mb-8 text-3xl" id="title">Large filled buttons - Icon and Text</h1>
  <!-- start snippet  -->
  <button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"><i class="fas fa-heart"></i> Large</button><button class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"><i class="fas fa-heart"></i> Large</button><button class="bg-indigo-500 text-white active:bg-indigo-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"><i class="fas fa-heart"></i> Large</button><button class="bg-lightBlue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"><i class="fas fa-heart"></i> Large</button><button class="bg-teal-500 text-white active:bg-teal-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"><i class="fas fa-heart"></i> Large</button><button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-base px-8 py-3 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"><i class="fas fa-heart"></i> Large</button><button class="bg-amber-500 text-white active:bg-amber-600...