<html>

<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">
</head>

<body>
  <div class="p-4">
		<h1 class="mb-4">Simple buttons</h1>
		<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
		<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
		<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
		<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
		<button class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
		<button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
		<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
	</div>
	<div class="p-4">
		<h1 class="mb-4">Outline buttons</h1>
		<button class="hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mb-2">Button</button>
		<button class="hover:bg-red-500 text-red-700 font-semibold hover:text-white py-2 px-4 border border-red-500 hover:border-transparent rounded mb-2">Button</button>
		<button class="hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded mb-2">Button</button>
		<button class="hover:bg-yellow-500 text-yellow-700 font-semibold hover:text-white py-2 px-4 border border-yellow-500 hover:border-transparent rounded mb-2">Button</button>
		<button class="hover:bg-teal-500 text-teal-700 font-semibold hover:text-white py-2 px-4 border border-teal-500 hover:border-transparent rounded mb-2">Button</button>
		<button class="hover:bg-purple-500 text-purple-700 font-semibold hover:text-white py-2 px-4 border border-purple-500 hover:border-transparent rounded mb-2">Button</button>
		<button class="hover:bg-orange-500 text-orange-700 font-semibold hover:text-white py-2 px-4 border border-orange-500 hover:border-transparent rounded mb-2">Button</button>
	</div>
  <h1 class="mb-2 p-4">Simple buttons with icon</h1>
	<div class="px-4 flex flex-wrap">
		<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
			<span>Button</span>
		</button>
		<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
			<span>Button</span>
		</button>
		<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
			<span>Button</span>
		</button>
		<button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
			<span>Button</span>
		</button>
		<button class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
			<span>Button</span>
		</button>
		<button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
			<span>Button</span>
		</button>
		<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
			<span>Button</span>
		</button>
	</div>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.