tailwind+react实现一个黑色自适应响应式后台管理仪表盘页面代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：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.createE.........完整代码请登录后点击上方下载按钮下载查看