wschenk/directory.base.html

## directory.base.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Directory</title>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="bg-blue-500 pt-16 pb-20 shadow-lg">
    <img src="logo.svg" class="mx-auto h-10 w-auto">
  </div>
  <div id="container">
  </div>

  <template id="person">
    <div>
      <img src="face.jpg">
      <h1>Will Schenk</h1>
      <h2>COO, CoFounder</h2>
      <a href="mailto:will@happyfuncorp.com">will</a>
    </div>
  </template>

  <script>
    var container = document.querySelector( '#container' );
    var template = document.querySelector( '#person' );

    for( var i = 0; i < 10; i++ ) {
      container.appendChild( template.content.cloneNode(true) );
    }
  </script>
</body>
</html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Directory</title>
	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
	</head>
	<body>
	<div class="bg-blue-500 pt-16 pb-20 shadow-lg">
	<img src="logo.svg" class="mx-auto h-10 w-auto">
	</div>
	<div id="container">
	</div>

	<template id="person">
	<div>
	<img src="face.jpg">
	<h1>Will Schenk</h1>
	<h2>COO, CoFounder</h2>
	<a href="mailto:will@happyfuncorp.com">will</a>
	</div>
	</template>

	<script>
	var container = document.querySelector( '#container' );
	var template = document.querySelector( '#person' );

	for( var i = 0; i < 10; i++ ) {
	container.appendChild( template.content.cloneNode(true) );
	}
	</script>
	</body>
	</html>