Prompt Dashboard - Copy this React, Tailwind Component to your project

<template> <div class="prompt dashboard"> <h1>Prompt Dashboard</h1> <div class="prompt grid"> <div v for="prompt in prompts" :key="prompt.id" class="prompt card"> <h3>{{ prompt.name }}</h3> <p>{{ prompt.description }}</p> <div class="prompt actions"> <button @click="viewPrompt(prompt.id)">View</button> <button @click="editPrompt(prompt.id)">Edit</button> <button @click="deletePrompt(prompt.id)">Delete</button> <button @click="viewHistory(prompt.id)">History</button> </div> </div> </div> <button @click="createNewPrompt" class="create prompt btn">Create New Prompt</button> </div> </template> <script> export default { name: 'PromptDashboard', data() { return { prompts: [ { id: 1, name: 'Prompt 1', description: 'Description for Prompt 1' }, { id: 2, name: 'Prompt 2', description: 'Description for Prompt 2' }, { id: 3, name: 'Prompt 3', description: 'Description for Prompt 3' }, { id: 4, name: 'Prompt 4', description: 'Description for Prompt 4' }, ] }; }, methods: { viewPrompt(id) { console.log('Viewing prompt', id); }, editPrompt(id) { console.log('Editing prompt', id); }, deletePrompt(id) { console.log('Deleting prompt', id); this.prompts = this.prompts.filter(prompt => prompt.id !== id); }, viewHistory(id) { console.log('Viewing history for prompt', id); }, createNewPrompt() { console.log('Creating new prompt'); } } }; </script> <style scoped> .prompt dashboard { padding: 20px; font family: Arial, sans serif; } h1 { font size: 2em; margin bottom: 20px; } .prompt grid { display: grid; grid template columns: repeat(auto fill, minmax(250px, 1fr)); gap: 20px; margin bottom: 20px; } .prompt card { border: 1px solid #ddd; border radius: 8px; padding: 15px; background color: #fff; box shadow: 0 2px 4px rgba(0,0,0,0.1); } .prompt card h3 { margin top: 0; margin bottom: 10px; } .prompt actions { display: flex; justify content: space between; margin top: 15px; } .prompt actions button { padding: 5px 10px; border: none; border radius: 4px; background color: #f0f0f0; cursor: pointer; transition: background color 0.3s; } .prompt actions button:hover { background color: #e0e0e0; } .create prompt btn { padding: 10px 20px; background color: #4CAF50; color: white; border: none; border radius: 4px; cursor: pointer; font size: 1em; transition: background color 0.3s; } .create prompt btn:hover { background color: #45a049; } </style>make the dashboard more attractive and wow effect look with some dummy data