tailwind布局实现销售仪表盘后台管理页面代码
代码语言:html
所属分类:布局界面
代码描述:tailwind布局实现销售仪表盘后台管理页面代码
代码标签: tailwind 布局 销售 仪表盘 后台 管理 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
</head>
<body>
<body translate="no" class="bg-gray-200 text-black dark:bg-gray-900 dark:text-white transition-colors duration-300">
<div id="root"><svg width="0" height="0" display="none" aria-hidden="true"><symbol id="arrow-down" viewBox="0 0 24 24"><g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><line x1="12" y1="4" x2="12" y2="20"></line><polyline points="4 12,12 20,20 12"></polyline></g></symbol><symbol id="arrow-up-right" viewBox="0 0 24 24"><g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><polyline points="6 6,18 6,18 18"></polyline><polyline points="6 18,18 6"></polyline></g></symbol><symbol id="arrow-down-right" viewBox="0 0 24 24"><g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><polyline points="6 18,18 18,18 6"></polyline><polyline points="6 6,18 18"></polyline></g></symbol><symbol id="calendar" viewBox="0 0 24 24"><path fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9H21M7 3V5M17 3V5M6 13H8M6 17H8M11 13H13M11 17H13M16 13H18M16 17H18M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z"></path></symbol><symbol id="checkmark" viewBox="0 0 24 24"><polyline fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" points="3 12,8 18,21 6"></polyline></symbol><symbol id="close" viewBox="0 0 24 24"><g stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><polyline points="7 7,17 17"></polyline><polyline points="17 7,7 17"></polyline></g></symbol><symbol id="crown" viewBox="0 0 24 24"><path fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M4 8L6 20H18L20 8M4 8L5.71624 9.37299C6.83218 10.2657 7.39014 10.7121 7.95256 10.7814C8.4453 10.8421 8.94299 10.7173 9.34885 10.4314C9.81211 10.1051 10.0936 9.4483 10.6565 8.13476L12 5M4 8C4.55228 8 5 7.55228 5 7C5 6.44772 4.55228 6 4 6C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8ZM20 8L18.2838 9.373C17.1678 10.2657 16.6099 10.7121 16.0474 10.7814C15.5547 10.8421 15.057 10.7173 14.6511 10.4314C14.1879 10.1051 13.9064 9.4483 13.3435 8.13476L12 5M20 8C20.5523 8 21 7.55228 21 7C21 6.44772 20.5523 6 20 6C19.4477 6 19 6.44772 19 7C19 7.55228 19.4477 8 20 8ZM12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5ZM12 4H12.01M20 7H20.01M4 7H4.01"></path></symbol><symbol id="ellipsis" viewBox="0 0 24 24"><g fill="currentcolor"><circle cx="4" cy="12" r="3"></circle><circle cx="12" cy="12" r="3"></circle><circle cx="20" cy="12" r="3"></circle></g></symbol><symbol id="microphone" viewBox="0 0 24 24"><path fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12V13C20 17.4183 16.4183 21 12 21C7.58172 21 4 17.4183 4 13V12M12 17C9.79086 17 8 15.2091 8 13V7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V13C16 15.2091 14.2091 17 12 17Z"></path></symbol><symbol id="plus" viewBox="0 0 24 24"><g stroke="currentcolor" stroke-linecap="round" stroke-width="3"><line x1="12" y1="4" x2="12" y2="20"></line><line x1="4" y1="12" x2="20" y2="12"></line></g></symbol></svg>
<div
class="m-auto p-6 w-full max-w-screen-2xl">
<div class="flex flex-col sm:flex-row justify-between gap-x-1 gap-y-3 mb-6">
<div class="flex gap-1 items-center">
<div class="bg-gray-400 dark:bg-gray-700 border border-white dark:border-gray-800 rounded-full overflow-hidden w-12 h-12 transition-colors duration-300"><img class="block w-full h-auto" width="40" height="40" alt="Jack O. Lantern" title="Jack O. Lantern" src="//repo.bfw.wiki/random/100x100/美女"></div>
<div class="bg-gray-400 dark:bg-gray-700 border border-white dark:border-gray-800 rounded-full overflow-hidden w-12 h-12 -ms-8 transition-colors duration-300"><img class="block w-full h-auto" width="40" height="40" alt="Jane Doe" title="Jane Doe" src="//repo.bfw.wiki/random/100x100/美女?r=1"></div>
<div class="bg-gray-400 dark:bg-gray-700 border border-white dark:border-gray-800 rounded-full overflow-hidden w-12 h-12 -ms-8 transition-colors duration-300"><img class="block w-full h-auto" width="40" height="40" alt="Joe Schmoe" title="Joe Schmoe" src="//repo.bfw.wiki/random/100x100/美女?r11=22"></div><button class="bg-black hover:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 text-white dark:text-black focus:outline-none focus-visible:ring rounded-full font-light flex justify-center items-center gap-2 px-5 py-3 min-w-12 h-12 transition-colors duration-300"
type="button"><svg class="icon" width="16px" height="16px" aria-hidden="true"><use href="#plus"></use></svg>Invite</button></div>
<div class="flex gap-1 items-center"><button class="bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-black dark:text-white focus:outline-none focus-visible:ring rounded-full font-light flex justify-center items-center gap-2 flex-shrink-0 w-12 h-12 transition-colors duration-300"
type="button" title="Calendar"><svg class="icon" width="16px" height="16px" aria-hidden="true"><use href="#calendar"></use></svg></button>
<div class="sm:hidden"><button class="bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-black dark:text-white focus:outline-none focus-visible:ring rounded-full font-light flex justify-center items-center gap-2 flex-shrink-0 w-12 h-12 transition-colors duration-300"
type="button" title="Download Report"><svg class="icon" width="16px" height="16px" aria-hidden="true"><use href="#arrow-down"></use></svg></button></div>
<div class="hidden sm:block"><button class="bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-black dark:text-white focus:outline-none focus-visible:ring rounded-full font-light flex justify-center items-center gap-2 px-5 py-3 min-w-12 h-12 transition-colors duration-300"
type="button"><svg class="icon" width="16px" height="16px" aria-hidden="true"><use href="#arrow-down"></use></svg>Download Report</button></div>
<div class="sm:hidden"><button class="bg-red-600 hover:bg-red-700 text-white focus:outline-none focus-visible:ring rounded-full font-light flex justify-center items-center gap-2 flex-shrink-0 w-12 h-12 transition-colors duration-300" type="button" title="AI Assistant"><svg class="icon" width="16px" height="16px" aria-hidden="true"><use href="#microphone"></use></svg></button></div>
<div
class="hidden sm:block"><button class="bg-red-600 hover:bg-red-700 text-white focus:outline-none focus-visible:ring rounded-full font-light flex justify-center items-center gap-2 px-5 py-3 min-w-12 h-12 transition-colors duration-300" type="button"><svg class="icon" width="16px" height="16px" aria-hidden="true"><use href="#microphone"></use></svg>AI Assistant</button></div>
</div>
</div>
<div class="grid gap-4 grid-cols-6 lg:grid-cols-12 auto-rows-min">
<div class="bg-white dark:bg-gray-800 rounded-2xl col-span-6 lg:col-span-5 lg:row-span-6 p-5 transition-colors duration-300">
<div class="flex justify-between gap-5 mb-6">
<h1 class="text-black dark:text-white text-3xl transition-colors duration-300">Sales Overview</h1><button class="bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-black dark:text-white border-2 border-gray-200 hover:border-gray-300 dark:border-gray-600 dark:hover:border-gray-500 focus:outline-none focus-visible:ring rounded-full font-light flex justify-center items-center gap-2 flex-shrink-0 w-12 h-12 transition-colors duration-300"
type="button" title="Options"><svg class="icon" width="16px" height="16px" aria-hidden="true"><use href="#ellipsis"></use></svg></button></div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-xl flex gap-3 mb-9 px-4 py-5 transition-colors duration-300"><span class="text-red-600 dark:text-red-400 text-2xl transition-colors duration-300"><svg class="icon" width="16px" height="16px" aria-hidden="true"><use href="#crown"></use></svg></span>
<p class="text-black dark:text-white font-light transition-colors duration-300">You’re the top <strong class="font-medium text-red-700 dark:text-red-300 transition-colors duration-300">5%</strong> of performers</p>
</div>
<div class="relative mb-10"><svg class="half-circle-pie m-auto rtl:-scale-x-100" viewBox="0 0 34 17" width="340px" height="170px" role="img" aria-label="Half circle chart showing 9 of 14 segments filled"><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(6.43) translate(-13.5,0)"></path><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(19.29) translate(-13.5,0)"></path><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(32.15) translate(-13.5,0)"></path><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(45.01) translate(-13.5,0)"></path><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(57.87) translate(-13.5,0)"></path><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(70.72999999999999) translate(-13.5,0)"></path><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(83.59) translate(-13.5,0)"></path><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(96.44999999999999) translate(-13.5,0)"></path><path class="fill-red-600 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(109.31) translate(-13.5,0)"></path><path class="fill-gray-100 dark:fill-gray-700 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(122.16999999999999) translate(-13.5,0)"></path><path class="fill-gray-100 dark:fill-gray-700 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C 3.5 0.629 3.1 0.93 2.7 0.98 L -2.7 1.5 C -3.142 1.5 -3.5 1.142 -3.5 0.7 L -3.5 -0.7 C -3.5 -1.142 -3.142 -1.5 -2.7 -1.5 Z" transform="translate(17,17) rotate(135.03) translate(-13.5,0)"></path><path class="fill-gray-100 dark:fill-gray-700 transition-colors duration-300" d="M -2.7 -1.5 L 2.7 -0.98 C 3.1 -0.93 3.5 -0.582 3.5 -0.182 L 3.5 0.217 C.........完整代码请登录后点击上方下载按钮下载查看
网友评论0