w3collective

## tailwind-card-component.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style a material design card component with Tailwind CSS</title>
    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
  </head>
  <body class="p-4 pt-16 bg-gray-200">
    <div class="bg-white rounded shadow max-w-md mx-auto">

## toggle-password.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Add a “Show Password” checkbox to a login form with JavaScript</title>
  <style>
    #password {
      background-image: url("https://img.icons8.com/material-sharp/20/000000/visible.png");
      background-position: 97% center;

## keyboard-shortcut.js
let keyDown = {
    'c': false,
    'p': false,
    's': false,
    'Meta': false,
    'Control': false
};
document.addEventListener('keydown', handleKeydown);
function handleKeydown(e) {
    e.preventDefault();

## digital-clock.js
const clock = document.createElement("div");
document.body.appendChild(clock);

const getTime = () => {
  const date = new Date();
  let hour = date.getHours();
  let min = date.getMinutes();
  let sec = date.getSeconds();
  hour = (hour < 10) ? "0" + hour : hour;
  min = (min < 10) ? "0" + min : min;

## alpine-accordion.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Alpine.js Accordion</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
    <script src="https://unpkg.com/alpinejs" defer></script>
  </head>
  <body>

## read-write-json-node.js
const fs = require("fs");

const books = [
  {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
  },
  {
    title: "Frankenstein",
    author: "Mary Shelley",

## detect-idle-tabs.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page Visibility API</title>
  </head>
  <body>
    <video id="video" width="300" controls>
      <source

## alpine-tabs.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alpine.js Tab Component</title>
    <script defer src="https://unpkg.com/alpinejs"></script>
  </head>
  <body>
    <div x-data="{ tab: 'description' }">

## zdog-3d-mario.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Design &amp; animate a pseudo 3D “Super Mario” with Zdog</title>
    <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
  </head>
  <body>
    <canvas class="zdog-canvas" width="300" height="300"></canvas>

## alpine-api-data-in-table.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Alpine.js: Displaying API data in a HTML table</title>
    <style>
      [x-cloak] {
        display: none !important;
      }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Style a material design card component with Tailwind CSS</title>
	<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
	</head>
	<body class="p-4 pt-16 bg-gray-200">
	<div class="bg-white rounded shadow max-w-md mx-auto">
	let keyDown = {
	'c': false,
	'p': false,
	's': false,
	'Meta': false,
	'Control': false
	};
	document.addEventListener('keydown', handleKeydown);
	function handleKeydown(e) {
	e.preventDefault();
	const clock = document.createElement("div");
	document.body.appendChild(clock);

	const getTime = () => {
	const date = new Date();
	let hour = date.getHours();
	let min = date.getMinutes();
	let sec = date.getSeconds();
	hour = (hour < 10) ? "0" + hour : hour;
	min = (min < 10) ? "0" + min : min;
	const fs = require("fs");

	const books = [
	{
	title: "The Great Gatsby",
	author: "F. Scott Fitzgerald",
	},
	{
	title: "Frankenstein",
	author: "Mary Shelley",