JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

</head>
<body bgcolor="#660099">
<div class="gridContainer clearfix">
  <div id="header"> 
    <h1>
        <a href="index.html"><img src="graphics_home/mini_logo.jpg" alt="the white dove  woodstock"     width="159" height="99" border="0" align="absbottom" /></a>
         <a href="rooms.html" class="hlink">Rooms</a>  
        <a href="todo.html" class="hlink">ToDo</a>  
        <a href="about.html" class="hlink">About</a>  
        <a href="bloc.html"class="hlink">Blog</a>  
        <a href="shop.html" class="hlink">Shop</a>  
        <a href="reservations.html" class="hlink">Reservations</a> 
    </h1>
  </div>
    </div>
    </head>

CSS

a:first-child {
    color: #FFFFFF;
    display: block;
    position: relative;
    text-align: left;
    font-size:24px;
}
a:nth-child(2) {
    margin-left: 137px;
    position: relative;
    text-decoration: none;
}
a:not(:first-child) {
    border: 1px solid #FF0000;
    padding: 3px;
    position: relative;
    text-decoration: none;
    top: -20px;
}
a:hover {
    color: #FFD700;
}
img {
    border: 1px solid #FF0000;
    display: inline-block;
    height: auto;
    width: 100px;
    word-wrap: break-word;
}