JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<body>
     <header>
         <ul>
             <li><a href="index.html"><img class="home" src="https://thelamc.org/images/menu-icons/Menu-icon-home.png"></a></li>
             <li><img class ="logo" src="logo.png" alt="Logo of My Company" title="My Company"/></li>   
             <li style="float: right;"><a href="index.html"><img class="sign" src="http://www.freeiconspng.com/uploads/profile-icon-9.png"></a></li>             
         </ul>
     </header>
</body>

CSS

body,ul {
    margin: 0px;
    padding: 0px;
}

body {
    height:100%;
}

ul{
    list-style-type: none;
    background-color:#f9f9f9;
    border-bottom-style:solid;
    border-bottom-width: thin;
    border-bottom-color: #eeeeee;
    border-top-style: solid;
    border-top-width: thin;
    border-top-color: #eeeeee;
}
 
li a{
     position:absolute;
     top:0;
    display: block;
    color: lightgrey;
    padding: 0px 0px;
    text-decoration: none;
}
 
IMG.logo {
    display: inline-block;
    margin:0 auto;
}
 
IMG.home {
    margin-top: 6.5%;
    margin-left: 5%;
    display: block;
    width : 20%;
    height: 20%;
    border-radius: 50%;
}
 
IMG.home:hover{
    background-color:#922471;
    transition-delay: 250ms;
    transition : all 0.75s;
    -moz-box-shadow: 0 0 20px #434343;
    -webkit-box-shadow: 0 0 20px #434343;
    box-shadow: 0 0 20px #434343;
     
}
 
.sign{
    display: block;
    float: right;
}
 
.sign:hover{
    background-color:#922471;
    transition-delay: 250ms;
    transition : all 0.75s;
    -moz-box-shadow: 0 0 20px #434343;
    -webkit-box-shadow: 0 0 20px #434343;
    box-shadow: 0 0 20px #434343;    
}