Skip to content

Instantly share code, notes, and snippets.

@yujp

yujp/tailwindcss-example.html

Last active October 12, 2023 00:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yujp/d4477482ee7aec3bbb813610f3fcbce7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yujp/d4477482ee7aec3bbb813610f3fcbce7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tailwindcss-example.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>TailwindCSS Excample</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-white h-screen font-san">
<nav class="flex items-center justify-between flex-wrap bg-gray-600 p-4">
<div class="hidden md:flex items-center flex-shrink-0 text-white mr-6">
<svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
</svg>
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
</div>
<div class="w-full block flex-grow flex md:items-center md:w-auto">
<div class="text-sm flex-grow">
<input
class="appearance-none block rounded w-full bg-gray-200 text-gray-700 border-gray-200 py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-password" type="text" placeholder="keywords">
</div>
<div class="w-64">
<a href="#"
class="inline-block text-sm px-4 py-3 ml-3 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray-800 hover:bg-white mt-0">Search</a>
<a href="#"
class="inline-block text-sm px-4 py-3 ml-3 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray-800 hover:bg-white mt-0">Detailed
Search</a>
</div>
</div>
</nav>
<main class="mx-auto mt-4 container flex">
<!-- side -->
<div class="w-64 p-4 text-gray-800 bg-gray-300 mt-3 border-t border-gray-400">
<h2>Options</h2>
<div class="inline-block relative w-full mt-2">
<label class="block"><input type="checkbox" /> option1</label>
<label class="block"><input type="checkbox" /> option2</label>
<label class="block"><input type="checkbox" /> option3</label>
</div>
<div class="inline-block relative w-full mt-2">
<select
class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 shadow leading-tight focus:outline-none focus:shadow-outline">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
</svg>
</div>
</div>
<div class="inline-block relative w-full mt-2">
<input
class="shadow appearance-none border w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="username" type="text" placeholder="input 1">
</div>
</div>
<!-- main content -->
<div class="w-full p-3 text-left text-gray-700">
<!--
<div class="bg-blue-100 border-l-4 border-blue-400 text-blue-900 px-4 py-3 mb-4">
<div class="flex">
<div class="py-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
class="fill-current h-6 w-6 text-blue-400 mr-4">
<path
d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z">
</path>
</svg></div>
<div>
<p class="font-semibold">List of Topics</p>
<p class="text-sm">found 5 topics</p>
</div>
</div>
</div>
-->
<!--
<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3" role="alert">
<p class="font-bold">5 Results found</p>
<p class="text-sm"></p>
</div>
-->
<h1 class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3" role="alert">
5 Results
</h1>
<table class="w-full text-left table-collapse text-gray-700 mt-2">
<thead>
<tr>
<th class="text-sm font-semibold p-2 bg-gray-100">#</th>
<th class="text-sm font-semibold p-2 bg-gray-100">Title</th>
<th class="text-sm font-semibold p-2 bg-gray-100">Version</th>
<th class="text-sm font-semibold p-2 bg-gray-100">Updated By</th>
<th class="text-sm font-semibold p-2 bg-gray-100">Updated At</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-2 border-t border-gray-300 ">5</td>
<td class="p-2 border-t border-gray-300 ">Sample Topic 5</td>
<td class="p-2 border-t border-gray-300 ">v1</td>
<td class="p-2 border-t border-gray-300 ">Sample User 2</td>
<td class="p-2 border-t border-gray-300 ">2019-09-22 14:00</td>
</tr>
<tr>
<td class="p-2 border-t border-gray-300 ">4</td>
<td class="p-2 border-t border-gray-300 ">Sample Topic 4</td>
<td class="p-2 border-t border-gray-300 ">v1</td>
<td class="p-2 border-t border-gray-300 ">Sample User 2</td>
<td class="p-2 border-t border-gray-300 ">2019-09-22 14:00</td>
</tr>
<tr>
<td class="p-2 border-t border-gray-300 ">3</td>
<td class="p-2 border-t border-gray-300 ">Sample Topic 3</td>
<td class="p-2 border-t border-gray-300 ">v1</td>
<td class="p-2 border-t border-gray-300 ">Sample User 2</td>
<td class="p-2 border-t border-gray-300 ">2019-09-22 14:00</td>
</tr>
<tr>
<td class="p-2 border-t border-gray-300 ">2</td>
<td class="p-2 border-t border-gray-300 ">Sample Topic 2</td>
<td class="p-2 border-t border-gray-300 ">v1</td>
<td class="p-2 border-t border-gray-300 ">Sample User 2</td>
<td class="p-2 border-t border-gray-300 ">2019-09-22 14:00</td>
</tr>
<tr>
<td class="p-2 border-t border-gray-300 ">1</td>
<td class="p-2 border-t border-gray-300 ">Sample Topic 1</td>
<td class="p-2 border-t border-gray-300 ">v1</td>
<td class="p-2 border-t border-gray-300 ">Sample User 2</td>
<td class="p-2 border-t border-gray-300 ">2019-09-22 14:00</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment