React
// Header.jsx
import React from 'react';
const Header = () => {
return (
<header className="header">
<div className="logo">
<img src="your-logo.png" alt="Logo" />
<h1>Your Company</h1>
</div>
<div className="login">
<a href="#">Login</a>
</div>
</header>
);
};
export default Header;
CSS
/* Header.css */
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 50px; /* Adjust the size of your logo */
height: auto;
margin-right: 10px;
}
.login {
text-align: right;
}
.login a {
color: #fff;
text-decoration: none;
margin-left: 20px;
}