bootstrap-with-tailwind/src/pages/index.astro
2023-01-20 19:00:19 +00:00

45 lines
1.4 KiB
Plaintext

---
import Button from "../components/Button.astro";
import Card from "../components/Card.astro";
import Jumbotron from "../components/Jumbotron.astro";
import Navbar from "../components/Navbar.astro";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body class="font-sans">
<Navbar title="Album" />
<Jumbotron title="Album example">
<p class="text-base leading-relaxed text-gray-500 sm:text-lg">
Something short and leading about the collection below—its contents, the
creator, etc. Make it short and sweet, but not too short so folks don't
simply skip over it entirely.
</p>
<div
class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1"
>
<Button shape="rounded" type="primary" text="Main call to action" />
<Button shape="rounded" type="secondary" text="Secondary action" />
</div>
</Jumbotron>
<div class="bg-gray-100">
<div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl">
<div
class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3"
>
{[...Array(9).keys()].map((_) => <Card />)}
</div>
</div>
</div>
</body>
</html>