Skip to content

Instantly share code, notes, and snippets.

@rcastellotti

rcastellotti/index.html

Created November 13, 2023 19:58
Show Gist options
  • Save rcastellotti/d3c9798b76f25dee49569ded3352ca68 to your computer and use it in GitHub Desktop.
Save rcastellotti/d3c9798b76f25dee49569ded3352ca68 to your computer and use it in GitHub Desktop.
Download ZIP
html+tailwind boilerplate
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rcastellotti - boilerplate</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
<script>
if (localStorage.theme === "dark") {
document.documentElement.classList.add("dark");
}
tailwind.config = { darkMode: "class" };
function toggleTheme() {
if (localStorage.theme !== "dark") {
document.documentElement.classList.add("dark");
localStorage.theme = "dark";
} else {
document.documentElement.classList.remove("dark");
localStorage.theme = "white";
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
a {
@apply text-blue-800 no-underline hover:underline dark:text-blue-400;
}
}
</style>
</head>
<body class="w-11/12 xs:w-9/12 2xl:w-6/12 bg-white dark:bg-zinc-800 text-gray-700 dark:text-gray-300 mx-auto">
<button onclick="toggleTheme()"
class="shadow-md fixed bottom-2 right-2 bg-gray-100 dark:bg-zinc-900 rounded w-8 h-8 flex justify-center items-center">
<i class="bi bi-circle-half"> </i>
</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment