114 lines
4.2 KiB
HTML
114 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<title>Tailwind CSS Sandbox</title>
|
|
</head>
|
|
<body class="bg-blue-800">
|
|
<div class="container bg-gray-50 h-full p-6 max-w-lg">
|
|
<h1 class="text-3xl text-blue-800">Tailwind CSS Sandbox</h1>
|
|
<ul class="mt-6">
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="01-utility-first/index.html"
|
|
>Utility First Example</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="02-colors/index.html"
|
|
>Colors</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a
|
|
class="text-blue-500 hover:text-blue-300"
|
|
href="03-container-spacing/index.html"
|
|
>Container & Spacing</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="04-typography/index.html"
|
|
>Typography</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="05-sizing/index.html"
|
|
>Sizing</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a
|
|
class="text-blue-500 hover:text-blue-300"
|
|
href="06-layout-position/index.html"
|
|
>Layout & Position</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a
|
|
class="text-blue-500 hover:text-blue-300"
|
|
href="07-backgrounds-shadows/index.html"
|
|
>Backgrounds & Shadows</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="08-borders/index.html"
|
|
>Borders & Border Radius</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="09-filters/index.html"
|
|
>Filters</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="10-interactivity/index.html"
|
|
>Interactivity</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="11-breakpoints/index.html"
|
|
>Breakpoints</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="12-columns/index.html"
|
|
>Column Layouts</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="13-flex/index.html"
|
|
>Flexbox</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="14-grid/index.html">Grid</a>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a
|
|
class="text-blue-500 hover:text-blue-300"
|
|
href="15-transform-transition/index.html"
|
|
>Transform & Transitions</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="16-animation/index.html"
|
|
>Animation</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="17-customization/index.html"
|
|
>Customization & Config</a
|
|
>
|
|
</li>
|
|
<li class="text-lg border border-blue-200 p-2 my-4">
|
|
<a class="text-blue-500 hover:text-blue-300" href="18-dark-mode/index.html"
|
|
>Dark Mode</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|