vue-should-flag.vue

 1<template>
 2  <div class="card border-l-4 border-indigo-500 rounded-xl p-6">
 3    <h2 class="text-purple-600 text-2xl font-bold">{{ title }}</h2>
 4    <p class="text-gray-400">{{ description }}</p>
 5    <button class="animate-bounce mt-4 px-4 py-2 bg-indigo-500 text-white rounded">
 6      Get Started
 7    </button>
 8  </div>
 9</template>
10
11<script setup>
12defineProps({
13  title: String,
14  description: String,
15});
16</script>
17
18<style scoped>
19.card {
20  border-left: 4px solid #6366f1;
21  border-radius: 12px;
22  font-family: 'Inter', sans-serif;
23}
24
25.card h2 {
26  background: linear-gradient(to right, #a855f7, #06b6d4);
27  -webkit-background-clip: text;
28  background-clip: text;
29  color: transparent;
30}
31
32.highlight {
33  animation: bounce 1s infinite;
34  transition: width 0.3s ease;
35}
36</style>