<header class='px-4 py-2 bg-blue-100'>
  <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643004937711/k3NMskkSn.png" width="50" alt="Daily Dev Tips Logo" />
</header>

<header class='flex justify-center px-4 py-2 bg-blue-100'>
  <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643004937711/k3NMskkSn.png" width="50" alt="Daily Dev Tips Logo" />
</header>

<header class='flex items-center px-4 py-2 bg-blue-100'>
  <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643004937711/k3NMskkSn.png" width="50" alt="Daily Dev Tips Logo" />
  <strong class='mx-auto'>This is my website</strong>
</header>

<header class='flex justify-between items-center px-4 py-2 bg-blue-100'>
  <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643004937711/k3NMskkSn.png" width="50" alt="Daily Dev Tips Logo" />
  <strong>This is my website</strong>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
</header>

<header class='flex justify-between items-center px-4 py-2 bg-blue-100'>
  <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643004937711/k3NMskkSn.png" width="50" alt="Daily Dev Tips Logo" />
  <strong>This is my website</strong>
  <nav>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
  </nav>
</header>

<header class='flex justify-between items-center px-4 py-2 bg-blue-100'>
  <div class='flex items-center'>
    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643004937711/k3NMskkSn.png" width="50" alt="Daily Dev Tips Logo" class='mr-2' />
    <strong>This is my website</strong>
  </div>
  <nav>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
  </nav>
</header>

<header class='px-4 py-2 bg-blue-100'>
  <div class='flex justify-between items-center container mx-auto'>
    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643004937711/k3NMskkSn.png" width="50" alt="Daily Dev Tips Logo" />
    <strong>This is my website</strong>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
  </div>
</header>
header {
  margin-bottom: 1rem;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.