JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<header class="header">
        <div class="logo">
            <img src="logo.png" alt="Logo">
        </div>
        <button class="header-button">Button</button>
    </header>

CSS

/* Reset some default styles for a cleaner look */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: white;
}

.header .logo {
    grid-column: 2;
    text-align: center;
}

.header .logo img {
    max-height: 50px; /* Adjust as needed */
}

.header-button {
    justify-self: end;
    background-color: #555;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.header-button:hover {
    background-color: #777;
}