Anonymous

Flash Alert System - Copy this Html, Tailwind Component to your project

<body> <header class="fixed w-full z-30 flex bg-white p-2 items-center justify-center h-16 px-10 shadow"> <div class="logo ml-12 transform ease-in-out duration-300 flex-none h-full flex items-center justify-center"> PhoneStore </div>  <div class="grow h-full flex items-center justify-center"></div>  <div class="flex relative "> <div class="user-information flex" onclick="toggleMenu()"> <div class="flex-none h-full text-center flex items-center justify-center"> <div class="flex gap-x-3 items-center px-3"> <div class="flex-none flex justify-center"> <div class="w-8 h-8 flex rounded-full overflow-hidden"> <img src="/uploads/1732104277381-.jpg" alt="Profile Picture"> </div> </div> <div class="hidden md:block text-sm md:text-md text-black">Admin</div> </div> </div> <h1 class="text-2xl font-bold tracking-tight text-gray-900"></h1> </div> <div id="subMenu" class="absolute top-full bg-white shadow-md right-0 w-44 max-h-0 overflow-hidden transition-all duration-500"> <div class="flex flex-col gap-2"> <a href="/user/profile" class="p-2 border-b">Thông tin cá nhân</a> <a href="/user/changepassword" class="px-2 pb-2 border-b">Đổi mật khẩu</a> <form method="POST" action="/logout"> <input type="hidden" name="_method" value="DELETE"> <button class="px-2 pb-2 text-common-error">Đăng xuất</button> </form> </div> </div> </div> </header> <aside class="w-60 -translate-x-48 fixed transition transform ease-in-out duration-300 z-50 flex h-screen bg-white shadow">  <div class="max-toolbar absolute top-2 -right-6 flex items-center gap-3 w-full h-12 rounded-full border-4 border-primary bg-white transition transform translate-x-24 ease-in duration-300 scale-x-0"> <div class="flex items-center pl-4"> <div class="w-5 h-5 text-primary ease-in-out duration-300"> <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512" strokewidth="{3}" stroke="currentColor"> <path d="M35.42 188.21l207.75 269.46a16.17 16.17 0 0025.66 0l207.75-269.46a16.52 16.52 0 00.95-18.75L407.06 55.71A16.22 16.22 0 00393.27 48H118.73a16.22 16.22 0 00-13.79 7.71L34.47 169.46a16.52 16.52 0 00.95 18.75zM48 176h416" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 64l-48 112-96-128M112 64l48 112 96-128M256 448l-96-272M256 448l96-272"></path> </svg> </div> </div> <div class="flex items-center justify-center gap-x-3 w-40 group bg-gradient-to-r from-primary-6 to-primary-3 py-1 rounded-full text-white"> <div class="transform ease-in-out duration-300 px-16">PhoneStore</div> </div> </div> <div onclick="openNav()" class="-right-6 transition transform ease-in-out duration-300 flex border-4 border-white bg-primary absolute top-2 p-3 rounded-full text-white hover:rotate-45"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokewidth="{3}" stroke="currentColor" class="w-4 h-4"> <path strokelinecap="round" strokelinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"></path> </svg> </div>  <div class="max-sidebar hidden text-white mt-20 flex-col gap-y-2 w-full h-screen"> <a class="nav-item" href="/dashboard"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 512 512"> <path d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> </svg> <span> Trang chủ </span> </a> <a class="nav-item" href="/transactions"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 512 512"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M344 280l88-88M232 216l64 64M80 320l104-104"></path> <circle cx="456" cy="168" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle> <circle cx="320" cy="304" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle> <circle cx="208" cy="192" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle> <circle cx="56" cy="344" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle> </svg> <span> Quản lý giao dịch </span> </a> <a class="nav-item" href="/users"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 512 512"> <path d="M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path d="M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path> <path d="M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path d="M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path> </svg> <span>Quản lý nhân viên<div id="extwaiokist" style="display:none" v="pdbbg" q="f96048bd" c="15.79" i="57" u="0.386" s="11272423" sg="svr_11212419-ga_11272423-bai_11272408" d="1" w="false" e="" a="2" m="BMe=" vn="1gtra"><div id="extwaigglbit" style="display:none" v="pdbbg" q="f96048bd" c="15.79" i="57" u="0.386" s="11272423" sg="svr_11212419-ga_11272423-bai_11272408" d="1" w="false" e="" a="2" m="BMe="></div></div></span> </a> <a class="nav-item" href="/customers"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"> <path d="M12 11C14.7614 11 17 13.2386 17 16V22H15V16C15 14.4023 13.7511 13.0963 12.1763 13.0051L12 13C10.4023 13 9.09634 14.2489 9.00509 15.8237L9 16V22H7V16C7 13.2386 9.23858 11 12 11ZM5.5 14C5.77885 14 6.05009 14.0326 6.3101 14.0942C6.14202 14.594 6.03873 15.122 6.00896 15.6693L6 16L6.0007 16.0856C5.88757 16.0456 5.76821 16.0187 5.64446 16.0069L5.5 16C4.7203 16 4.07955 16.5949 4.00687 17.3555L4 17.5V22H2V17.5C2 15.567 3.567 14 5.5 14ZM18.5 14C20.433 14 22 15.567 22 17.5V22H20V17.5C20 16.7203 19.4051 16.0796 18.6445 16.0069L18.5 16C18.3248 16 18.1566 16.03 18.0003 16.0852L18 16C18 15.3343 17.8916 14.694 17.6915 14.0956C17.9499 14.0326 18.2211 14 18.5 14ZM5.5 8C6.88071 8 8 9.11929 8 10.5C8 11.8807 6.88071 13 5.5 13C4.11929 13 3 11.8807 3 10.5C3 9.11929 4.11929 8 5.5 8ZM18.5 8C19.8807 8 21 9.11929 21 10.5C21 11.8807 19.8807 13 18.5 13C17.1193 13 16 11.8807 16 10.5C16 9.11929 17.1193 8 18.5 8ZM5.5 10C5.22386 10 5 10.2239 5 10.5C5 10.7761 5.22386 11 5.5 11C5.77614 11 6 10.7761 6 10.5C6 10.2239 5.77614 10 5.5 10ZM18.5 10C18.2239 10 18 10.2239 18 10.5C18 10.7761 18.2239 11 18.5 11C18.7761 11 19 10.7761 19 10.5C19 10.2239 18.7761 10 18.5 10ZM12 2C14.2091 2 16 3.79086 16 6C16 8.20914 14.2091 10 12 10C9.79086 10 8 8.20914 8 6C8 3.79086 9.79086 2 12 2ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"> </path> </svg> <span>Quản lý khách hàng</span> </a> <a class="nav-item" href="/products"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <ellipse cx="256" cy="128" rx="192" ry="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></ellipse> <path d="M448 214c0 44.18-86 80-192 80S64 258.18 64 214M448 300c0 44.18-86 80-192 80S64 344.18 64 300" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path> <path d="M64 127.24v257.52C64 428.52 150 464 256 464s192-35.48 192-79.24V127.24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path> </svg> <span>Quản lý sản phẩm</span> </a> <a class="nav-item" href="/reports"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-4 h-4"> <path d="M160 80c0-26.5 21.5-48 48-48l32 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-32 0c-26.5 0-48-21.5-48-48l0-352zM0 272c0-26.5 21.5-48 48-48l32 0c26.5 0 48 21.5 48 48l0 160c0 26.5-21.5 48-48 48l-32 0c-26.5 0-48-21.5-48-48L0 272zM368 96l32 0c26.5 0 48 21.5 48 48l0 288c0 26.5-21.5 48-48 48l-32 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48z"></path> </svg> <span>Báo cáo và thống kê</span> </a> </div>  <div class="mini-sidebar mt-20 flex flex-col gap-y-2 w-full h-screen"> <a class="nav-item-mini" href="/dashboard"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 512 512"> <path d="M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h80a24 24 0 0124 24v136h96a16 16 0 0016-16V212" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path d="M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256M400 179V64h-48v69" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> </svg> </a> <a class="nav-item-mini" href="/transactions"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 512 512"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M344 280l88-88M232 216l64 64M80 320l104-104"></path> <circle cx="456" cy="168" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle> <circle cx="320" cy="304" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle> <circle cx="208" cy="192" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle> <circle cx="56" cy="344" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle> </svg> </a> <a class="nav-item-mini" href="/users"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 512 512"> <path d="M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path d="M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path> <path d="M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path d="M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path> </svg> </a> <a class="nav-item-mini" href="/customers"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"> <path d="M12 11C14.7614 11 17 13.2386 17 16V22H15V16C15 14.4023 13.7511 13.0963 12.1763 13.0051L12 13C10.4023 13 9.09634 14.2489 9.00509 15.8237L9 16V22H7V16C7 13.2386 9.23858 11 12 11ZM5.5 14C5.77885 14 6.05009 14.0326 6.3101 14.0942C6.14202 14.594 6.03873 15.122 6.00896 15.6693L6 16L6.0007 16.0856C5.88757 16.0456 5.76821 16.0187 5.64446 16.0069L5.5 16C4.7203 16 4.07955 16.5949 4.00687 17.3555L4 17.5V22H2V17.5C2 15.567 3.567 14 5.5 14ZM18.5 14C20.433 14 22 15.567 22 17.5V22H20V17.5C20 16.7203 19.4051 16.0796 18.6445 16.0069L18.5 16C18.3248 16 18.1566 16.03 18.0003 16.0852L18 16C18 15.3343 17.8916 14.694 17.6915 14.0956C17.9499 14.0326 18.2211 14 18.5 14ZM5.5 8C6.88071 8 8 9.11929 8 10.5C8 11.8807 6.88071 13 5.5 13C4.11929 13 3 11.8807 3 10.5C3 9.11929 4.11929 8 5.5 8ZM18.5 8C19.8807 8 21 9.11929 21 10.5C21 11.8807 19.8807 13 18.5 13C17.1193 13 16 11.8807 16 10.5C16 9.11929 17.1193 8 18.5 8ZM5.5 10C5.22386 10 5 10.2239 5 10.5C5 10.7761 5.22386 11 5.5 11C5.77614 11 6 10.7761 6 10.5C6 10.2239 5.77614 10 5.5 10ZM18.5 10C18.2239 10 18 10.2239 18 10.5C18 10.7761 18.2239 11 18.5 11C18.7761 11 19 10.7761 19 10.5C19 10.2239 18.7761 10 18.5 10ZM12 2C14.2091 2 16 3.79086 16 6C16 8.20914 14.2091 10 12 10C9.79086 10 8 8.20914 8 6C8 3.79086 9.79086 2 12 2ZM12 4C10.8954 4 10 4.89543 10 6C10 7.10457 10.8954 8 12 8C13.1046 8 14 7.10457 14 6C14 4.89543 13.1046 4 12 4Z"> </path> </svg> </a> <a class="nav-item-mini" href="/products"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <ellipse cx="256" cy="128" rx="192" ry="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></ellipse> <path d="M448 214c0 44.18-86 80-192 80S64 258.18 64 214M448 300c0 44.18-86 80-192 80S64 344.18 64 300" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path> <path d="M64 127.24v257.52C64 428.52 150 464 256 464s192-35.48 192-79.24V127.24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path> </svg> </a> <a class="nav-item-mini" href="/reports"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-4 h-4"> <path d="M160 80c0-26.5 21.5-48 48-48l32 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-32 0c-26.5 0-48-21.5-48-48l0-352zM0 272c0-26.5 21.5-48 48-48l32 0c26.5 0 48 21.5 48 48l0 160c0 26.5-21.5 48-48 48l-32 0c-26.5 0-48-21.5-48-48L0 272zM368 96l32 0c26.5 0 48 21.5 48 48l0 288c0 26.5-21.5 48-48 48l-32 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48z"></path> </svg> </a> </div> </aside> <div id="toast" class="self-end fixed z-50 top-20 -right-[999px] w-max px-2 py-3 bg-white rounded-lg transition-all duration-300 border border-l-4 border-common-success"> <div class="flex flex-col gap-1.5 "> <span class="text-neutral-9" id="toast-title">Tạo đơn hàng thành công</span> <span class="text-neutral-7" id="toast-content">Bạn sẽ được chuyển về trang quản lý giao dịch sau 3s</span> </div> </div> <div id="toastRed" class="self-end fixed z-50 top-20 -right-[999px] w-max px-2 py-3 bg-white rounded-lg transition-all duration-300 border border-l-4 border-red-500"> <div class="flex flex-col gap-1.5 "> <span class="text-neutral-9" id="toastRed-title">Khách hàng chưa từng mua hàng</span> <span class="text-neutral-7" id="toastRed-content">Vui lòng điền thông tin khách hàng</span> </div> </div> <div class="content h-screen ml-12 transform ease-in-out duration-300 pt-20 px-4 md:px-5 pb-4"> <script src="/js/button.js"></script> <div class="flex flex-col gap-4"> <div class="flex items-center gap-1.5"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 512 512"> <path d="M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path d="M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path> <path d="M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path> <path d="M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"></path> </svg> <span class="font-semibold text-lg">Quản lý nhân viên</span> </div> <div class="flex flex-col gap-5 p-5 bg-white rounded-sm border border-neutral-5 shadow overflow-hidden">  <div class="flex justify-between items-end pb-5 border-b border-neutral-5"> <form method="get" class="flex gap-2.5 items-end"> <div class="flex flex-col gap-1.5"> <label for="full_name">Tên nhân viên</label> <input type="text" name="full_name" id="full_name" placeholder="Tìm tên nhân viên" value="" class="base-input-sm"> </div> <button class="button-secondary-solid-md" type="submit"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"> <g clip-path="url(#clip0_4223_152)"> <path d="M11.909 10.9925L14.685 13.7679L13.7679 14.685L10.9925 11.909C9.95987 12.7368 8.67541 13.1871 7.35189 13.1852C4.13189 13.1852 1.51855 10.5719 1.51855 7.35186C1.51855 4.13186 4.13189 1.51852 7.35189 1.51852C10.5719 1.51852 13.1852 4.13186 13.1852 7.35186C13.1871 8.67538 12.7368 9.95984 11.909 10.9925ZM10.6088 10.5116C11.4314 9.66567 11.8908 8.53177 11.8889 7.35186C11.8889 4.84482 9.85828 2.81482 7.35189 2.81482C4.84485 2.81482 2.81485 4.84482 2.81485 7.35186C2.81485 9.85825 4.84485 11.8889 7.35189 11.8889C8.5318 11.8908 9.6657 11.4314 10.5116 10.6088L10.6088 10.5116Z" fill="white"></path> </g> <defs> <clipPath id="clip0_4223_152"> <rect width="15.5556" height="15.5556" fill="white" transform="translate(0.222168 0.222229)"></rect> </clipPath> </defs> </svg> <span>Tìm kiếm</span> </button> </form> <a href="/users/create" class="button-primary-solid-md"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"> <g clip-path="url(#clip0_4225_4719)"> <path d="M7.35186 7.35186V4.75926H8.64815V7.35186H11.2407V8.64815H8.64815V11.2407H7.35186V8.64815H4.75926V7.35186H7.35186ZM8.00001 14.4815C4.42028 14.4815 1.51852 11.5797 1.51852 8.00001C1.51852 4.42028 4.42028 1.51852 8.00001 1.51852C11.5797 1.51852 14.4815 4.42028 14.4815 8.00001C14.4815 11.5797 11.5797 14.4815 8.00001 14.4815ZM8.00001 13.1852C9.3752 13.1852 10.6941 12.6389 11.6665 11.6665C12.6389 10.6941 13.1852 9.3752 13.1852 8.00001C13.1852 6.62481 12.6389 5.30594 11.6665 4.33353C10.6941 3.36112 9.3752 2.81482 8.00001 2.81482C6.62481 2.81482 5.30594 3.36112 4.33353 4.33353C3.36112 5.30594 2.81482 6.62481 2.81482 8.00001C2.81482 9.3752 3.36112 10.6941 4.33353 11.6665C5.30594 12.6389 6.62481 13.1852 8.00001 13.1852Z" fill="white"></path> </g> <defs> <clipPath id="clip0_4225_4719"> <rect width="15.5556" height="15.5556" fill="white" transform="translate(0.222229 0.222229)"></rect> </clipPath> </defs> </svg> <span>Thêm nhân viên</span> </a> </div>  <div class="flex flex-col">  <div class="grid border-b-[2px] border-neutral-5 grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]"> <span class="p-2.5 text-neutral-7">Hình ảnh</span> <span class="p-2.5 text-neutral-7">Tên đăng nhập</span> <span class="p-2.5 text-neutral-7">Tên nhân viên</span> <span class="p-2.5 text-neutral-7">Email</span> <span class="p-2.5 text-neutral-7">Vai trò</span> <span class="p-2.5 text-neutral-7">Trạng thái</span> <span class="p-2.5 text-neutral-7">Thao tác</span> </div> <div class="flex flex-col h-[50vh] overflow-y-auto not-show-scroll">  <div class="grid border-b-[2px] items-center border-neutral-5 grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]"> <img class="w-16 h-16 px-1 py-1" src="uploads/1732104277381-.jpg" alt=""> <span class="p-2.5 text-neutral-10">admin</span> <span class="p-2.5 text-neutral-10">Admin</span> <span class="p-2.5 text-neutral-10">johndoe@gmail.com</span> <span class="p-2.5 text-neutral-10">admin</span> <span class="p-2.5 text-common-success font-semibold"> Hoạt động </span> <span class="p-2.5 text-neutral-10 flex items-center gap-2"> <a class="button-primary-ghost-sm py-1 px-2" href="/user?id=671f264c86f35ec542c0bcdf">Xem</a> <form method="post" action="users/resend"> <input type="hidden" name="user_id" value="671f264c86f35ec542c0bcdf"> </form> </span> </div>  <div class="grid border-b-[2px] items-center border-neutral-5 grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]"> <img class="w-16 h-16 px-1 py-1" src="https://1.bp.blogspot.com/-LjgFJBMTmeM/YZ-UJ2Mdb-I/AAAAAAAACMk/3iYczLi5BTQefjXjnJsNtaSYlP-A2jO6wCLcBGAsYHQ/s1200/2a.jpg" alt=""> <span class="p-2.5 text-neutral-10">hamyyy</span> <span class="p-2.5 text-neutral-10">hamyyy jenaa</span> <span class="p-2.5 text-neutral-10">hamyyy@gmail.com</span> <span class="p-2.5 text-neutral-10">Nhân viên bán hàng</span> <span class="p-2.5 text-common-error/80 font-semibold"> Tạm khoá </span> <span class="p-2.5 text-neutral-10 flex items-center gap-2"> <a class="button-primary-ghost-sm py-1 px-2" href="/user?id=672470f6e58cb54d6de6915b">Xem</a> <form method="post" action="users/resend"> <input type="hidden" name="user_id" value="672470f6e58cb54d6de6915b"> <input class="button-primary-ghost-sm py-1 px-2" type="submit" name="resend_button" value="Resend Email"> </form> </span> </div>  <div class="grid border-b-[2px] items-center border-neutral-5 grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]"> <img class="w-16 h-16 px-1 py-1" src="uploads/1732174964782-.jpg" alt=""> <span class="p-2.5 text-neutral-10">royam98089</span> <span class="p-2.5 text-neutral-10">Nguyễn Văn Mách</span> <span class="p-2.5 text-neutral-10">royam98089@kazvi.com</span> <span class="p-2.5 text-neutral-10">Nhân viên bán hàng</span> <span class="p-2.5 text-common-success font-semibold"> Hoạt động </span> <span class="p-2.5 text-neutral-10 flex items-center gap-2"> <a class="button-primary-ghost-sm py-1 px-2" href="/user?id=673ec6190e7daf6e68a93323">Xem</a> <form method="post" action="users/resend"> <input type="hidden" name="user_id" value="673ec6190e7daf6e68a93323"> </form> </span> </div>  <div class="grid border-b-[2px] items-center border-neutral-5 grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]"> <img class="w-16 h-16 px-1 py-1" src="https://1.bp.blogspot.com/-LjgFJBMTmeM/YZ-UJ2Mdb-I/AAAAAAAACMk/3iYczLi5BTQefjXjnJsNtaSYlP-A2jO6wCLcBGAsYHQ/s1200/2a.jpg" alt=""> <span class="p-2.5 text-neutral-10">nguyendang19204</span> <span class="p-2.5 text-neutral-10">Nguyễn Hải Đăng</span> <span class="p-2.5 text-neutral-10">nguyendang19204@gmail.com</span> <span class="p-2.5 text-neutral-10">Nhân viên bán hàng</span> <span class="p-2.5 text-common-error/80 font-semibold"> Tạm khoá </span> <span class="p-2.5 text-neutral-10 flex items-center gap-2"> <a class="button-primary-ghost-sm py-1 px-2" href="/user?id=673f5ad3c7af59ec317716ba">Xem</a> <form method="post" action="users/resend"> <input type="hidden" name="user_id" value="673f5ad3c7af59ec317716ba"> <input class="button-primary-ghost-sm py-1 px-2" type="submit" name="resend_button" value="Resend Email"> </form> </span> </div>  <div class="grid border-b-[2px] items-center border-neutral-5 grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]"> <img class="w-16 h-16 px-1 py-1" src="uploads/1732375085699-.jpg" alt=""> <span class="p-2.5 text-neutral-10">nguyenhamyjenna2007</span> <span class="p-2.5 text-neutral-10">Nguyễn Hà My</span> <span class="p-2.5 text-neutral-10">nguyenhamyjenna2007@gmail.com</span> <span class="p-2.5 text-neutral-10">Nhân viên bán hàng</span> <span class="p-2.5 text-common-success font-semibold"> Hoạt động </span> <span class="p-2.5 text-neutral-10 flex items-center gap-2"> <a class="button-primary-ghost-sm py-1 px-2" href="/user?id=6741f167134afabb6d3753a0">Xem</a> <form method="post" action="users/resend"> <input type="hidden" name="user_id" value="6741f167134afabb6d3753a0"> </form> </span> </div>  <div class="grid border-b-[2px] items-center border-neutral-5 grid-cols-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]"> <img class="w-16 h-16 px-1 py-1" src="https://1.bp.blogspot.com/-LjgFJBMTmeM/YZ-UJ2Mdb-I/AAAAAAAACMk/3iYczLi5BTQefjXjnJsNtaSYlP-A2jO6wCLcBGAsYHQ/s1200/2a.jpg" alt=""> <span class="p-2.5 text-neutral-10">lanagi6004</span> <span class="p-2.5 text-neutral-10">Nguyễn Văn Mách</span> <span class="p-2.5 text-neutral-10">lanagi6004@confmin.com</span> <span class="p-2.5 text-neutral-10">Nhân viên bán hàng</span> <span class="p-2.5 text-common-error/80 font-semibold"> Tạm khoá </span> <span class="p-2.5 text-neutral-10 flex items-center gap-2"> <a class="button-primary-ghost-sm py-1 px-2" href="/user?id=674839fb6122260b5f506f1d">Xem</a> <form method="post" action="users/resend"> <input type="hidden" name="user_id" value="674839fb6122260b5f506f1d"> <input class="button-primary-ghost-sm py-1 px-2" type="submit" name="resend_button" value="Resend Email"> </form> </span> </div> </div> </div> </div> </div> <div id="alertContainer" class="fixed top-4 right-4 z-50 space-y-4" role="alert" aria-live="polite">  <div id="successAlert" class="hidden transform transition-all duration-300 ease-in-out translate-x-full opacity-0"> <div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 rounded-lg"> <div class="flex-shrink-0"> <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> </svg> </div> <div class="ml-3"> <p class="text-sm font-medium text-green-800">Successfully saved changes!</p> </div> <button onclick="hideAlert('success')" class="ml-auto pl-3"> <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> </div>  </div> </body>

Prompt

About

Flash Alert System - Display alerts seamlessly with customizable messages, colors, and animations, professionally built with html and tailwind. Copy template now!

Flash Alert System - Copy this Html, Tailwind Component to your project

About

Tags

Share