INIT: astro + vue + tailwind + first components

src/components/Card.astro

@@ -0,0 +1,62 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-color: white;
+		background-image: var(--accent-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1rem 1.3rem;
+		border-radius: 0.35rem;
+		color: #111;
+		background-color: white;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+		color: #444;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent));
+	}
+</style>

src/components/demo.vue

@@ -0,0 +1,17 @@
+<template>
+  <section>
+    <div class="bg-slate-900 rounded-xl w-72 h-56">
+      <div class="p-3 flex justify-between w-20">
+        <div class="bg-green-400 h-4 w-4 r-1 rounded-full"></div>
+        <div class="bg-yellow-300 h-4 w-4 r-1 rounded-full"></div>
+        <div class="bg-red-600 h-4 w-4 r-1 rounded-full"></div>
+      </div>
+      <div class="text-white font-mono p-4 pt-0">
+        $:  pegaz up nextcloud
+      </div>
+    </div>
+    <div class="bg-slate-400 rounded-2xl w-96 h-80">
+      <div class="bg-white"></div>
+    </div>
+  </section>
+</template>