tailwind+react实现一个黑色自适应响应式后台管理仪表盘页面代码
代码语言：html
所属分类：响应式
代码描述：tailwind+react实现一个黑色自适应响应式后台管理仪表盘页面代码
代码标签： tailwind react 黑色 自适应 响应式 后台 管理 仪表盘
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.01.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
body{
font-family: 'Nunito', sans-serif;
color:#676767;
background-color: #1e1e1e;
}
.bg-card{
background-color:#171717;
}
.bg-sidebar-card-top{
background-color: #353535;
}
.sidebar-separator-top{
border-bottom: 1px solid #2e2e2e;
}
.sidebar-separator-bottom{
border-top: 1px solid #2e2e2e;
}
.text-premium-yellow{
color: #f7b91c;
}
.icon-background{
background: #2d2d2d;
}
.tooltip-head{
background: #1d1d1d;
}
.tooltip-body{
background:#252525 ;
}
.search-icon{
top: 50%;
transform: translate(0, -50%);
}
.card-stack-border{
border-bottom: 2px solid #696969;
}
.bg-details{
background-color: #1e1e1e;
}
.add-component-head{
background-color: #181818;
background-image: url("//repo.bfw.wiki/bfwrepo/images/xinguang/carbon-fibre.png");
}
.sidebar-item-selected{
color: white;
border-right: 2px solid white;
}
.sidebar-item{
border-right: 2px solid transparent;
}
.sidebar-item:hover {
color:#a1a0a0;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prop-types.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-spring-web.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Recharts.min.js"></script>
<script type="module">
import clsx from "//repo.bfw.wiki/bfwrepo/js/module/clsx/clsx.js";
const { useState } = React;
const { useSpring, animated, config } = ReactSpring;
const { LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer } = Recharts;
const map = (value, sMin, sMax, dMin, dMax) => {
return dMin + (value - sMin) / (sMax - sMin) * (dMax - dMin);
};
const pi = Math.PI;
const tau = 2 * pi;
const employeeData = [
{
id: 1,
name: 'Esther Howard',
position: "Sale's manager USA",
transactions: 3490,
rise: true,
tasksCompleted: 3,
imgId: 0 },
{
id: 2,
name: 'Eleanor Pena',
position: "Sale's manager Europe",
transactions: 590,
rise: false,
tasksCompleted: 5,
imgId: 2 },
{
id: 3,
name: 'Robert Fox',
position: "Sale's manager Asia",
transactions: 2600,
rise: true,
tasksCompleted: 1,
imgId: 3 }];
const Countrydata = [
{ name: 'USA', rise: true, value: 21942.83, id: 1 },
{ name: 'Ireland', rise: false, value: 19710.0, id: 2 },
{ name: 'Ukraine', rise: false, value: 12320.3, id: 3 },
{ name: 'Sweden', rise: true, value: 9725.0, id: 4 }];
const segmentationData = [
{ c1: 'Not Specified', c2: '800', c3: '#363636', color: '#535353' },
{ c1: 'Male', c2: '441', c3: '#818bb1', color: '#595f77' },
{ c1: 'Female', c2: '233', c3: '#2c365d', color: '#232942' },
{ c1: 'Other', c2: '126', c3: '#334ed8', color: '#2c3051' }];
const sidebarItems = [
[
{ id: '0', title: 'Dashboard', notifications: false },
{ id: '1', title: 'Overview', notifications: false },
{ id: '2', title: 'Chat', notifications: 6 },
{ id: '3', title: 'Team', notifications: false }],
[
{ id: '4', title: 'Tasks', notifications: false },
{ id: '5', title: 'Reports', notifications: false },
{ id: '6', title: 'Settings', notifications: false }]];
const graphData = [
'Nov',
'Dec',
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'June',
'July'].
map(i => {
const revenue = 500 + Math.random() * 2000;
const expectedRevenue = Math.max(revenue + (Math.random() - 0.5) * 2000, 0);
return {
name: i,
revenue,
expectedRevenue,
sales: Math.floor(Math.random() * 500) };
});
const App = () => {
const [showSidebar, onSetShowSidebar] = useState(false);
return /*#__PURE__*/(
React.createElement("div", { className: "flex" }, /*#__PURE__*/
React.createElement(Sidebar, {
onSidebarHide: () => {
onSetShowSidebar(false);
},
showSidebar: showSidebar }), /*#__PURE__*/
React.createElement(Content, {
onSidebarHide: () => {
onSetShowSidebar(true);
} })));
};
function Sidebar({ onSidebarHide, showSidebar }) {
const [selected, setSelected] = useState('0');
const { dashOffset, indicatorWidth, precentage } = useSpring({
dashOffset: 26.015,
indicatorWidth: 70,
precentage: 77,
from: { dashOffset: 113.113, indicatorWidth: 0, precentage: 0 },
config: config.molasses });
return /*#__PURE__*/(
React.createElement("div", {
className: clsx(
'fixed inset-y-0 left-0 bg-card w-full sm:w-20 xl:w-60 sm:flex flex-col z-10',
showSidebar ? 'flex' : 'hidden') }, /*#__PURE__*/
React.createElement("div", { className: "flex-shrink-0 overflow-hidden p-2" }, /*#__PURE__*/
React.createElement("div", { className: "flex items-center h-full sm:justify-center xl:justify-start p-2 sidebar-separator-top" }, /*#__PURE__*/
React.createElement(IconButton, { icon: "res-react-dash-logo", className: "w-10 h-10" }), /*#__PURE__*/
React.createElement("div", { className: "block sm:hidden xl:block ml-2 font-bold text-xl text-white" }, "React"), /*#__PURE__*/
React.createElement("div", { className: "flex-grow sm:hidden xl:block" }), /*#__PURE__*/
React.createElement(IconButton, {
icon: "res-react-dash-sidebar-close",
className: "block sm:hidden",
onClick: onSidebarHide }))), /*#__PURE__*/
React.createElement("div", { className: "flex-grow overflow-x-hidden overflow-y-auto flex flex-col" }, /*#__PURE__*/
React.createElement("div", { className: "w-full p-3 h-24 sm:h-20 xl:h-24 hidden sm:block flex-shrink-0" }, /*#__PURE__*/
React.createElement("div", { className: "bg-sidebar-card-top rounded-xl w-full h-full flex items-center justify-start sm:justify-center xl:justify-start px-3 sm:px-0 xl:px-3" }, /*#__PURE__*/
React.createElement(Icon, { path: "res-react-dash-sidebar-card", className: "w-9 h-9 " }), /*#__PURE__*/
React.createElement("div", { className: "block sm:hidden xl:block ml-3" }, /*#__PURE__*/
React.createElement("div", { className: "text-sm font-bold text-white" }, "Sales House"), /*#__PURE__*/
React.createElement("div", { className: "text-sm" }, "General Item")), /*#__PURE__*/
React.createElement("div", { className: "block sm:hidden xl:block flex-grow" }), /*#__PURE__*/
React.createElement(Icon, {
path: "res-react-dash-sidebar-card-select",
className: "block sm:hidden xl:block w-5 h-5" }))),
sidebarItems[0].map((i) => /*#__PURE__*/
React.createElement(MenuItem, {
key: i.id,
item: i,
onClick: setSelected,
selected: selected })), /*#__PURE__*/
React.createElement("div", { className: "mt-8 mb-0 font-bold px-3 block sm:hidden xl:block" }, "SHORTCUTS"),
sidebarItems[1].map((i) => /*#__PURE__*/
React.createElement(MenuItem, {
key: i.id,
item: i,
onClick: setSelected,
selected: selected })), /*#__PURE__*/
React.createElement("div", { className: "flex-grow" }), /*#__PURE__*/
React.createElement("div", { className: "w-full p-3 h-28 hidden sm:block sm:h-20 xl:h-32" }, /*#__PURE__*/
React.createElement("div", {
className: "rounded-xl w-full h-full px-3 sm:px-0 xl:px-3 overflow-hidden",
style: {
backgroundImage: "url('//repo.bfw.wiki/bfwrepo/images/xinguang/res-react-dash-usage-card.svg')" } }, /*#__PURE__*/
React.createElement("div", { className: "block sm:hidden xl:block pt-3" }, /*#__PURE__*/
React.createElement("div", { className: "font-bold text-gray-300 text-sm" }, "Used Space"), /*#__PURE__*/
React.createElement("div", { className: "text-gray-500 text-xs" }, "Admin updated 09:12 am November 08,2020"), /*#__PURE__*/
React.createElement(animated.div, { className: "text-right text-gray-400 text-xs" },
precentage.interpolate(i => `${Math.round(i)}%`)), /*#__PURE__*/
React.createElement("div", { className: "w-full text-gray-300" }, /*#__PURE__*/
React.createElement("svg", {
viewBox: "0 0 100 11",
fill: "none",
xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
React.createElement("line", {
x1: "5",
y1: "5.25",
x2: "95",
y2: "5.25",
stroke: "#3C3C3C",
strokeWidth: "5",
strokeLinecap: "round" }), /*#__PURE__*/
React.createElement(animated.line, {
x1: "5",
y1: "5.25",
x2: indicatorWidth,
y2: "5.25",
stroke: "currentColor",
strokeWidth: "5",
strokeLinecap: "round" })))), /*#__PURE__*/
React.createElement("div", { className: "hidden sm:block xl:hidden " }, /*#__PURE__*/
React.createElement("svg", {
width: "56",
height: "56",
viewBox: "0 0 56 56",
fill: "none",
xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
React.createElement("rect", { width: "56", height: "56", fill: "#2C2C2D" }), /*#__PURE__*/
React.createElement("path", {
d: "M 28 28 m 0, -18 a 18 18 0 0 1 0 36 a 18 18 0 0 1 0 -36",
stroke: "#3C3C3C",
strokeWidth: "6" }), /*#__PURE__*/
React.createElement(animated.path, {
d: "M 28 28 m 0, -18 a 18 18 0 0 1 0 36 a 18 18 0 0 1 0 -36",
stroke: "#fff",
strokeLinecap: "round",
strokeDasharray: "113.113",
strokeDashoffset: dashOffset,
strokeWidth: "6" })))))), /*#__PURE__*/
React.createElement("div", { className: "flex-shrink-0 overflow-hidden p-2" }, /*#__PURE__*/
React.createElement("div", { className: "flex items-center h-full sm:justify-center xl:justify-start p-2 sidebar-separator-bottom" }, /*#__PURE__*/
React.createElement(Image, { path: "mock_faces_8", className: "w-10 h-10" }), /*#__PURE__*/
React.createElement("div", { className: "block sm:hidden xl:block ml-2 font-bold " }, "Jerry Wilson"), /*#__PURE__*/
React.createElement("div", { className: "flex-grow block sm:hidden xl:block" }), /*#__PURE__*/
React.createElement(Icon, {
path: "res-react-dash-options",
className: "block sm:hidden xl:block w-3 h-3" })))));
}
function MenuItem({ item: { id, title, notifications }, onClick, selected }) {
return /*#__PURE__*/(
React.createElement("div", {
className: clsx(
'w-full mt-6 flex items-center px-3 sm:px-0 xl:px-3 justify-start sm:justify-center xl:justify-start sm:mt-6 xl:mt-3 cursor-pointer',
selected === id ? 'sidebar-item-selected' : 'sidebar-item'),
onClick: () => onClick(id) }, /*#__PURE__*/
React.createElement(SidebarIcons, { id: id }), /*#__PURE__*/
React.createElement("div", { className: "block sm:hidden xl:block ml-2" }, title), /*#__PURE__*/
React.createElement("div", { className: "block sm:hidden xl:block flex-grow" }),
notifications && /*#__PURE__*/
React.createElement("div", { className: "flex sm:hidden xl:flex bg-pink-600 w-5 h-5 flex items-center justify-center rounded-full mr-2" }, /*#__PURE__*/
React.createElement("div", { className: "text-white text-sm" }, notifications))));
}
function Content({ onSidebarHide }) {
return /*#__PURE__*/(
React.createElement("div", { className: "flex w-full" }, /*#__PURE__*/
React.createElement("div", { className: "w-full h-screen hidden sm:block sm:w-20 xl:w-60 flex-shrink-0" }, "."), /*#__PURE__*/
React.createElement("div", { className: " h-screen flex-grow overflow-x-hidden overflow-auto flex flex-wrap content-start p-2" }, /*#__PURE__*/
React.createElement("div", { className: "w-full sm:flex p-2 items-end" }, /*#__PURE__*/
React.createElement("div", { className: "sm:flex-grow flex justify-between" }, /*#__PURE__*/
React.createElement("div", { className: "" }, /*#__PURE__*/
React.createElement("div", { className: "flex items-center" }, /*#__PURE__*/
React.createElement("div", { className: "text-3xl font-bold text-white" }, "Hello David"), /*#__PURE__*/
React.createElement("div", { className: "flex items-center p-2 bg-card ml-2 rounded-xl" }, /*#__PURE__*/
React.createElement(Icon, { path: "res-react-dash-premium-star" }), /*#__PURE__*/
React.createElement("div", { className: "ml-2 font-bold text-premium-yellow" }, "PREMIUM"))), /*#__PURE__*/
React.createElement("div", { className: "flex items-center" }, /*#__PURE__*/
React.createElement(Icon, {
path: "res-react-dash-date-indicator",
className: "w-3 h-3" }), /*#__PURE__*/
React.createElement("div", { className: "ml-2" }, "October 26"))), /*#__PURE__*/
React.createElement(IconButton, {
icon: "res-react-dash-sidebar-open",
className: "block sm:hidden",
onClick: onSidebarHide })), /*#__PURE__*/
React.createElement("div", { className: "w-full sm:w-56 mt-4 sm:mt-0 relative" }, /*#__PURE__*/
React.createElement(Icon, {
path: "res-react-dash-search",
className: "w-5 h-5 search-icon left-3 absolute" }), /*#__PURE__*/
React.createElement("form", { action: "#", method: "POST" }, /*#__PURE__*/
React.createElement("input", {
type: "text",
name: "company_website",
id: "company_website",
className: "pl-12 py-2 pr-2 block w-full rounded-lg border-gray-300 bg-card",
placeholder: "search" })))),
employeeData.map(
({
id,
name,
position,
transactions,
rise,
tasksCompleted,
imgId }) => /*#__PURE__*/
React.createElement(NameCard, {
key: id,
id: id,
name: name,
position: position,
transactionAmount: transactions,
rise: rise,
tasksCompleted: tasksCompleted,
imgId: imgId })), /*#__PURE__*/
React.createElement("div", { className: "w-full p-2 lg:w-2/3" }, /*#__PURE__*/
React.createElement("div", { className: "rounded-lg bg-card sm:h-80 h-60" }, /*#__PURE__*/
React.createElement(Graph, null))), /*#__PURE__*/
React.createElement("div", { className: "w-full p-2 lg:w-1/3" }, /*#__PURE__*/
React.createElement("div", { className: "rounded-lg bg-card h-80" }, /*#__PURE__*/
React.createElement(TopCountries, null))), /*#__PURE__*/
React.createElement("div", { className: "w-full p-2 lg:w-1/3" }, /*#__PURE__*/
React.createElement("div", { className: "rounded-lg bg-card h-80" }, /*#__PURE__*/
React.createElement(Segmentation, null))), /*#__PURE__*/
React.createElement("div", { className: "w-full p-2 lg:w-1/3" }, /*#__PURE__*/
React.createElement("div", { className: "rounded-lg bg-card h-80" }, /*#__PURE__*/
React.createElement(Satisfication, null))), /*#__PURE__*/
React.createElement("div", { className: "w-full p-2 lg:w-1/3" }, /*#__PURE__*/
React.createElement("div", { className: "rounded-lg bg-card overflow-hidden h-80" }, /*#__PURE__*/
React.createElement(AddComponent, null))))));
}
function NameCard({
name,
position,
transactionAmount,
rise,
tasksCompleted,
imgId })
{
const { transactions, barPlayhead } = useSpring({
transactions: transactionAmount,
barPlayhead: 1,
from: { transactions: 0, barPlayhead: 0 } });
return /*#__PURE__*/(
React.createElement("div", { className: "w-full p-2 lg:w-1/3" }, /*#__PURE__*/
React.createElement("div", { className: "rounded-lg bg-card flex justify-between p-3 h-32" }, /*#__PURE__*/
React.createElement("div", { className: "" }, /*#__PURE__*/
React.createElement("div", { className: "flex items-center" }, /*#__PURE__*/
React.createElement(Image, { path: `mock_faces_${imgId}`, className: "w-10 h-10" }), /*#__PURE__*/
React.createElement("div", { className: "ml-2" }, /*#__PURE__*/
React.createElement("div", { className: "flex items-center" }, /*#__PURE__*/
React.createElement("div", { className: "mr-2 font-bold text-white" }, name), /*#__PURE__*/
React.createElement(Icon, { path: "res-react-dash-tick" })), /*#__PURE__*/
React.createElement("div", { className: "text-sm " }, position))), /*#__PURE__*/
React.createElement("div", { className: "text-sm mt-2" }, `${tasksCompleted} from 5 tasks completed`), /*#__PURE__*/
React.createElement("svg", {
className: "w-44 mt-3",
height: "6",
viewBox: "0 0 200 6",
fill: "none",
xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
React.createElement("rect", { width: "200", height: "6", rx: "3", fill: "#2D2D2D" }), /*#__PURE__*/
React.createElement(animated.rect, {
width: barPlayhead.interpolate(
i => i * (tasksCompleted / 5) * 200),
height: "6",
rx: "3",
fill: "url(#paint0_linear)" }), /*#__PURE__*/
React.createElement("rect", { x: "38", width: "2", height: "6", fill: "#171717" }), /*#__PURE__*/
React.createElement("rect", { x: "78", width: "2", height: "6", fill: "#171717" }), /*#__PURE__*/
React.createElement("rect", { x: "118", width: "2", height: "6", fill: "#171717" }), /*#__PURE__*/
React.createElement("rect", { x: "158", width: "2", height: "6", fill: "#171717" }), /*#__PURE__*/
React.createElement("defs", null, /*#__PURE__*/
React.createElement("linearGradient", { id: "paint0_linear", x1: "0", y1: "0", x2: "1", y2: "0" }, /*#__PURE__*/
React.createElement("stop", { stopColor: "#8E76EF" }), /*#__PURE__*/
React.createElement("stop", { offset: "1", stopColor: "#3912D2" }))))), /*#__PURE__*/
React.createElement("div", { className: "flex flex-col items-center" }, /*#__PURE__*/
React.createElement(Icon, {
path: rise ? 'res-react-dash-bull' : 'res-react-dash-bear',
className: "w-8 h-8" }), /*#__PURE__*/
React.createElement(animated.div, {
className: clsx(
rise ? 'text-green-500' : 'text-red-500',
'font-bold',
'text-lg') },
transactions.interpolate(i => `$${i.toFixed(2)}`)), /*#__PURE__*/
React.createElement("div", { className: "text-sm " }, "Last 6 month")))));
}
function Graph() {
const CustomTooltip = () => /*#__PURE__*/
React.createElement("div", { className: "rounded-xl overflow-hidden tooltip-head" }, /*#__PURE__*/
React.createElement("div", { className: "flex items-center justify-between p-2" }, /*#__PURE__*/
React.createElement("div", { className: "" }, "Revenue"), /*#__PURE__*/
React.createElement(Icon, { path: "res-react-dash-options", className: "w-2 h-2" })), /*#__PURE__*/
React.createElement("div", { className: "tooltip-body text-center p-3" }, /*#__PURE__*/
React.createElement("div", { className: "text-white font-bold" }, "$1300.50"), /*#__PURE__*/
React.createElement("div", { className: "" }, "Revenue from 230 sales")));
return /*#__PURE__*/(
React.createElement("div", { className: "flex p-4 h-full flex-col" }, /*#__PURE__*/
React.createElement("div", { className: "" }, /*#__PURE__*/
React.createElement("div", { className: "flex items-center" }, /*#__PURE__*/
React.createElement("div", { className: "font-bold text-white" }, "Your Work Summary"), /*#__PURE__*/
React.createElement("div", { className: "flex-grow" }), /*#__PURE__*/
React.createElement(Icon, { path: "res-react-dash-graph-range", className: "w-4 h-4" }), /*#__PURE__*/
React.createElement("div", { className: "ml-2" }, "Last 9 Months"), /*#__PURE__*/
React.createElement("div", { className: "ml-6 w-5 h-5 flex justify-center items-center rounded-full icon-background" }, "?")), /*#__PURE__*/
React.createElement("div", { className: "font-bold ml-5" }, "Nov - July")), /*#__PURE__*/
React.createElement("div", { className: "flex-grow" }, /*#__PURE__*/
React.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /*#__PURE__*/
React.createElement(LineChart, { width: 500, height: 300, data: graphData }, /*#__PURE__*/
React.createElement("defs", null, /*#__PURE__*/
React.createElement("linearGradient", { id: "paint0_linear", x1: "0", y1: "0", x2: "1", y2: "0" }, /*#__PURE__*/
React.createElement("stop", { stopColor: "#6B8DE3" }), /*#__PURE__*/
React.createElement("stop", { offset: "1", stopColor: "#7D1C8D" }))), /*#__PURE__*/
React.createElement(CartesianGrid, {
horizontal: false,
strokeWidth: "6",
stroke: "#252525" }), /*#__PURE__*/
React.createElement(XAxis, {
dataKey: "name",
axisLine: false,
tickLine: false,
tickMargin: 10 }), /*#__PURE__*/
React.createElement(YAxis, { axisLine: false, tickLine: false, tickMargin: 10 }), /*#__PURE__*/
React.createElement(Tooltip, { content: /*#__PURE__*/React.createElement(CustomTooltip, null), cursor: false }), /*#__PURE__*/
React.createElement(Line, {
activeDot: false,
type: "monotone",
d.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0