Engineering Project Dashboard

Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

This tailwind example is contributed by Ayyamperumal S, on 16-Mar-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information,Info, Show info, Statistics,Admin Dashboard, User dashboard,Toast, Snackbar

Button Pagination Profile Stats Other Dashboard Notification

Author Ayyamperumal S

Tailwind v3.4 458 6

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Engineering Project Assignment Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>

<div>
<h1 class="text-4xl font-bold text-slate-800 tracking-tight">Project Resource Dashboard</h1>
<p class="text-slate-500 mt-2 text-sm">Live overview of engineering assignments, delivery status and workload distribution</p>
</div>

<a href="https://www.ayyamperumal.online/" target="_blank">
<button class="px-6 py-3 rounded-xl bg-indigo-600 text-white text-sm font-medium shadow-md hover:bg-indigo-700 transition">
Visit Portfolio
</button>
</a>

</div>
</div>

<div class="bg-white rounded-xl shadow-sm border p-6">
<p class="text-xs text-slate-500">Active Projects</p>
<p class="text-3xl font-semibold text-slate-800 mt-2">12</p>
</div>

<div class="bg-white rounded-xl shadow-sm border p-6">
<p class="text-xs text-slate-500">Engineers Allocated</p>
<p class="text-3xl font-semibold text-slate-800 mt-2">37</p>
</div>

<div class="bg-white rounded-xl shadow-sm border p-6">
<p class="text-xs text-slate-500">Pending Deliverables</p>
<p class="text-3xl font-semibold text-slate-800 mt-2">8</p>
</div>

</div>

<div class="px-8 py-6 border-b bg-slate-50 flex justify-between items-center">
<p class="text-sm text-slate-600">Engineering Assignment Matrix</p>
<span id="entryCount" class="text-xs text-slate-500"></span>
</div>

<tr>
<th class="px-8 py-4 text-left">Engineer</th>
<th class="px-8 py-4 text-left">Project</th>
<th class="px-8 py-4 text-left">Technology</th>
<th class="px-8 py-4 text-left">Delivery Date</th>
<th class="px-8 py-4 text-left">Status</th>
<th class="px-8 py-4 text-right">Links</th>
</tr>

</thead>

<td class="px-8 py-6 flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center font-semibold text-indigo-600">AP</div>
<div>
<p class="font-medium text-slate-800">Ayyam Perumal</p>
<p class="text-xs text-slate-500">Senior Mobile Architect</p>
</div>
</td>

<td class="px-8 py-6 text-slate-600">Ride Sharing Platform</td>
<td class="px-8 py-6 text-slate-600">React Native · FastAPI</td>
<td class="px-8 py-6 text-slate-600">15 Aug 2026</td>

<td class="px-8 py-6">
<span class="px-3 py-1 text-xs rounded-full bg-emerald-100 text-emerald-600 font-medium">In Progress</span>
</td>

<a href="https://www.ayyamperumal.online/" target="_blank" class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md hover:bg-indigo-200">Portfolio</a>

<a href="https://games.ayyamperumal.online/" target="_blank" class="px-3 py-1 text-xs bg-purple-100 text-purple-600 rounded-md hover:bg-purple-200">Games</a>

</td>

</tr>

<td class="px-8 py-6 flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center font-semibold text-purple-600">MS</div>
<div>
<p class="font-medium text-slate-800">Megha Suresh</p>
<p class="text-xs text-slate-500">Backend Engineer</p>
</div>
</td>

<td class="px-8 py-6 text-slate-600">AI Medical Assistant</td>
<td class="px-8 py-6 text-slate-600">Python · FastAPI · OpenAI</td>
<td class="px-8 py-6 text-slate-600">02 Sep 2026</td>

<td class="px-8 py-6">
<span class="px-3 py-1 text-xs rounded-full bg-amber-100 text-amber-600 font-medium">Planning</span>
</td>

<td class="px-8 py-6 text-right">
<a href="https://www.ayyamperumal.online/" target="_blank" class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md hover:bg-indigo-200">Portfolio</a>
</td>

</tr>

<td class="px-8 py-6 flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center font-semibold text-pink-600">RJ</div>
<div>
<p class="font-medium text-slate-800">Rohan Joseph</p>
<p class="text-xs text-slate-500">Mobile Architect</p>
</div>
</td>

<td class="px-8 py-6 text-slate-600">Enterprise Banking App</td>
<td class="px-8 py-6 text-slate-600">Flutter · Microservices</td>
<td class="px-8 py-6 text-slate-600">10 Oct 2026</td>

<td class="px-8 py-6">
<span class="px-3 py-1 text-xs rounded-full bg-indigo-100 text-indigo-600 font-medium">Architecture</span>
</td>

<td class="px-8 py-6 text-right">
<a href="https://www.ayyamperumal.online/" target="_blank" class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md hover:bg-indigo-200">Portfolio</a>
</td>

</tr>

<td class="px-8 py-6 flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-sky-100 flex items-center justify-center font-semibold text-sky-600">AN</div>
<div>
<p class="font-medium text-slate-800">Anjali Nair</p>
<p class="text-xs text-slate-500">DevOps Engineer</p>
</div>
</td>

<td class="px-8 py-6 text-slate-600">Cloud Infrastructure</td>
<td class="px-8 py-6 text-slate-600">AWS · Kubernetes</td>
<td class="px-8 py-6 text-slate-600">22 Aug 2026</td>

<td class="px-8 py-6">
<span class="px-3 py-1 text-xs rounded-full bg-blue-100 text-blue-600 font-medium">Deployment</span>
</td>

<td class="px-8 py-6 text-right">
<a href="https://www.ayyamperumal.online/" target="_blank" class="px-3 py-1 text-xs bg-indigo-100 text-indigo-600 rounded-md hover:bg-indigo-200">Portfolio</a>
</td>

</tr>

</tbody>

</table>

</div>

<div class="flex gap-2">
<button class="px-4 py-2 bg-white border rounded-lg hover:bg-slate-50">Previous</button>
<button class="px-4 py-2 bg-white border rounded-lg hover:bg-slate-50">Next</button>
</div>

</div>

const searchInput=document.getElementById('searchInput')
const rows=document.querySelectorAll('#tableBody tr')
const resultText=document.getElementById('resultText')
const entryCount=document.getElementById('entryCount')

entryCount.innerText=rows.length+" assignments"

function updateCount(){
let visible=0
rows.forEach(r=>{if(r.style.display!=='none'){visible++}})
resultText.innerText="Showing "+visible+" of "+rows.length+" assignments"
}

updateCount()

searchInput.addEventListener('keyup',function(){

const term=this.value.toLowerCase()

rows.forEach(row=>{

const text=row.innerText.toLowerCase()

if(text.includes(term)){
row.style.display=''
}else{
row.style.display='none'
}

})

updateCount()

})

</script>

</body>
</html>

Related Examples

Simple Pagination

Manuela Bianka

3 years ago

12.6k
Previous Next Buttons
Pagination buttons

Alok

3 years ago

15.4k
Product hunt showcase

Lukas Müller

3 years ago

12.9k
Show user details

Lucas Martinez

3 years ago

26.2k
Updated customer details page
Customer details page

Olivia Smith

2 years ago

4.3k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

1 year ago

4.4k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.6k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

nejaa badr

1 year ago

3.6k
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

nejaa badr

1 year ago

3.8k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2.5k