这个css布局样式真巧妙啊，react导航栏组件：Headmenu实现

由于原代码已经非常简洁，以下是一个React组件的示例，使用了类似的CSS样式来实现一个头部导航栏（Headmenu）：

import React from 'react';
import { Link } from 'react-router-dom';
import './Headmenu.css';
 
const Headmenu = () => {
  return (
    <div className="headmenu">
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于我们</Link>
        </li>
        <li>
          <Link to="/contact">联系方式</Link>
        </li>
      </ul>
      <style jsx>{`
        .headmenu {
          background-color: #282c34;
          overflow: hidden;
          font-size: 17px;
          font-weight: 300;
          padding: 10px 0;
          text-align: center;
        }
        .headmenu ul {
          display: inline-block;
        }
        .headmenu li {
          display: inline;
          margin-right: 20px;
        }
        .headmenu a {
          color: #fff;
          text-decoration: none;
        }
        .headmenu a:hover {
          text-decoration: underline;
        }
      `}</style>
    </div>
  );
};
 
export default Headmenu;

这个React组件使用了内联样式（即style jsx）来避免CSS文件的引入，并且使用了react-router-dom中的Link组件来创建导航链接。这个示例展示了如何使用React和CSS来创建一个简洁而又现代的导航栏。