Skip to content

Instantly share code, notes, and snippets.

@brandonstephens

brandonstephens/index.html

Created January 20, 2021 00:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brandonstephens/12bef68e1c398dd7784ca4fc5c56e0c4 to your computer and use it in GitHub Desktop.
Save brandonstephens/12bef68e1c398dd7784ca4fc5c56e0c4 to your computer and use it in GitHub Desktop.
Download ZIP
Scratch Pad
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📝 Scatch Pad</title>
<!-- https://tailwindcss.com -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<!-- https://github.com/alpinejs/alpine/ -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer="defer"></script>
</head>
<body class="bg-gray-50 text-xl text-gray-700 font-light">
<header class="px-8 pt-12 pb-20">
<h1 class="text-6xl font-black mb-4">📝 Scratch Pad</h1>
<p>Starter template with <a class="border-b-2 border-yellow-500 hover:text-yellow-600"
href="https://tailwindcss.com">Tailwind CSS</a> and <a
class="border-b-2 border-yellow-500 hover:text-yellow-600"
href="https://github.com/alpinejs/alpine/">Alpine.js</a> loaded from CDN.</p>
</header>
<main class="px-8" x-data="{emoji: true}">
<h2 class="text-6xl mb-4">
<span x-show="emoji">😬</span>
<span x-show="!emoji">🤯</span>
</h2>
<button @click="emoji = !emoji" class="bg-gray-200 hover:bg-yellow-400 rounded-md px-4 py-2 shadow-md">Click
Me</button>
</main>
<footer class="px-8 py-20">Made by <a class="border-b-2 border-yellow-500 hover:text-yellow-600"
href="brandonstephens@me.com">Brandon</a>.</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment