Educational Dashboard Interface - Copy this Html, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8"-/>-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0"-/>-<title>Educational-Dashboard</title>-<link-rel="stylesheet"-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"-/>-<link-rel="stylesheet"-href="css/dashboard.css"-/>-</head>-<body>-<div-class="container">-<aside-class="sidebar">-<div-class="profile-section">-<img-src="https://c.wallhere.com/photos/2f/d0/Yahari_Ore_no_Seishun_Love_Comedy_wa_Machigatteiru_anime_boys_anime_girls_Yukinoshita_Yukino_Hikigaya_Hachiman_school_uniform_long_hair-1980561.jpg!d"-alt="Profile-Picture"-class="profile-pic"-/>-<h3-id="name">Name</h3>-<p>Student-ID:-<span-id="roll">Roll</span></p>-</div>-<nav>-<ul>-<li>-<a-href="#"><i-class="fas-fa-home"></i>-Home</a>-</li>-<li>-<a-href="/timetable"><i-class="fas-fa-book"></i>-Timetable</a>-</li>-<li>-<a-href="#"><i-class="fas-fa-tasks"></i>-Assignments</a>-</li>-<li>-<a-href="#"><i-class="fas-fa-chart-bar"></i>-Grades</a>-</li>-<li>-<a-href="#"><i-class="fas-fa-user"></i>-Profile</a>-</li>-<li>-<a-href="#"><i-class="fas-fa-cog"></i>-Settings</a>-</li>-<li>-<form-action="/auth/logout"-method="POST">-<a-href="#"-onclick="event.preventDefault();-this.closest('form').submit();"->-<i-class="fas-fa-sign-out-alt">Logout</i>-</a>-</form>-</li>-</ul>-</nav>-</aside>-<main-class="main-content">-<header>-<div-class="header-content">-<h1>Welcome-back,-<span-id="first-name">Name</span></h1>-<p-class="date"-id="date">Date</p>-</div>-<div-class="quick-stats">-<div-class="stat-card">-<i-class="fas-fa-clock"></i>-<span>Next-Class:-Human-Values-in-90-mins</span>-</div>-<div-class="stat-card">-<i-class="fas-fa-calendar-check"></i>-<span>3-Assignments-Due-This-Week</span>-</div>-</div>-</header>-<section-class="cards">-<div-class="card-assignments">-<h3><i-class="fas-fa-tasks"></i>-Upcoming-Assignments</h3>-<div-class="assignment-item">-<h4>Mathematics</h4>-<p>LAMA-Chapter-5-Exercises</p>-<div-class="due-date">Due:-Nov-6,-2024</div>-<div-class="progress-bar">-<div-class="progress"-style="width:-70%"></div>-</div>-</div>-<div-class="assignment-item">-<h4>DLD</h4>-<p>DLD-Lab-Report</p>-<div-class="due-date">Due:-Nov-8,-2024</div>-<div-class="progress-bar">-<div-class="progress"-style="width:-30%"></div>-</div>-</div>-</div>-<div-class="card-courses">-<h3><i-class="fas-fa-book"></i>-Your-Courses</h3>-<div-class="course-item">-<h4>Probability-and-Statistics</h4>-<p>Prof.-Krishnand-Vishwakarma</p>-<span-class="grade">Current-Grade:-A</span>-</div>-<div-class="course-item">-<h4>LAMA</h4>-<p>Prof.-Sachhidanand-Mishra</p>-<span-class="grade">Current-Grade:-B+</span>-</div>-<div-class="course-item">-<h4>Software-Development</h4>-<p>Prof.-K.G.-Srinivas</p>-<span-class="grade">Current-Grade:-A</span>-</div>-</div>-<div-class="card-announcements">-<h3><i-class="fas-fa-bullhorn"></i>-Announcements</h3>-<div-class="announcement-item">-<span-class="date">Nov-5</span>-<h4>DLD-Quiz</h4>-<p>-It-will-be-online-MCQ-type-quiz-of-20-minutes-with-maximum-marks-20-on-Nov-14.-</p>-</div>-<div-class="announcement-item">-<span-class="date">Nov-1</span>-<h4>Media-Matrix-Event</h4>-<p>-Join-us-and-register-for-the-Media-Matrix-Event-from-8-to-10-Nov.-</p>-</div>-</div>-</section>-</main>-</div>-<script-src="js/dashboard.js"></script>-</body>-</html>
