1.  <!--notification starts here-->
2.         <div class="flex justify-center w-8">
3.             <div class="flex justify-center w-8">
4.                 <div class="dropdown relative">
5.                     <i class="fas fa-bell dropbtn text-2xl text-gray-800 cursor-pointer" onclick="myFunction()"></i>
6.                     <div id="myDropdown" class="dropdown-content  absolute hidden z-50" style="width: 20rem;">
7.                         <div class="w-full flex flex-col bg-gray-100 -ml-64  mt-5 rounded-md shadow-md overflow-hidden">
8.                             <!--noti header-->
9.                             <div class="w-full flex justify-center p-3 font-semibold box-border border-b ">
10.                                 You have 10 New Notifications
11.                             </div>
12.                             <!--noti content-->
13.                             <div class="w-full flex flex-col overflow-auto h-64">
14.                                 <div class="w-full flex items-center px-2 py-3 hover:bg-gray-100 hover:shadow-md">
15.                                     <div class="w-12">
16.                                         <img src="{{user.profile.profile_pic.url}}" alt="profile"
17.                                             class="h-12 w-12 rounded-full">
18.                                     </div>
19.                                     <div class="flex-1 flex flex-col ml-4">
20.                                         <span class="text-gray-800">
21.                                             Sushan has purchases the BMW
22.                                         </span>
23.                                         <p class="text-gray-700 text-sm font-semibold">
24.                                             just now
25.                                         </p>
26.                                     </div>
27.                                 </div>
28.  
29.                             </div>
30.                             <a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all
31.                                 notifications</a>
32.                         </div>
33.                     </div>
34.                 </div>
35.             </div>
36.             <script>
37.                 /* When the user clicks on the button,
38.                 toggle between hiding and showing the dropdown content */
39.                 function myFunction() {
40.                     document.getElementById("myDropdown").classList.toggle("show");
41.                 }
42.  
43.                 // Close the dropdown if the user clicks outside of it
44.                 window.onclick = function (event) {
45.                     if (!event.target.matches('.dropbtn')) {
46.                         var dropdowns = document.getElementsByClassName("dropdown-content");
47.                         var i;
48.                         for (i = 0; i < dropdowns.length; i++) {
49.                             var openDropdown = dropdowns[i];
50.                             if (openDropdown.classList.contains('show')) {
51.                                 openDropdown.classList.remove('show');
52.                             }
53.                         }
54.                     }
55.                 }
56.             </script>
57.         </div>
58.         <!--notification end here-->