JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<header>
 <div class="logoName">
   <h1>Goodware</h1>
   <p>easy psd template</p>
 </div> 
  <nav>
    <ul>
      <li>home</li>
      <li>about</li>
      <li>service</li>
      <li>potfolio</li>
      <li>contact</li>
    </ul>
  </nav>
  
 <div class="carousel">
   <img src="https://hdwallsource.com/img/2014/7/funny-bear-wallpaper-41929-42917-hd-wallpapers.jpg" alt="">
 </div>
</header>

CSS

body{
  font-family: 'Nanum Gothic', sans-serif;
  max-width:1500px;
  margin:0 auto;
}
header{
  padding-top:40px;
  border-bottom:13px solid #333;
  border-top:13px solid #333;
  height:60vh;
  background-color:#e25151;
  display:flex;
  justify-content:space-between;
}
h1{
  font-weight:900;
}
header h1 , p{
color:#fff;
margin:2px;
}
ul{
  display:flex;
  list-style:none;
}
li{
  text-transform:uppercase;
  color:#fff;
  margin:20px;
  transition:all .3s;
}

li:hover{
 cursor:pointer;
 transition:all .3s;
color:#333;
}

.carousel{
  position:absolute;
  width:60%;
  top:30%;
  left:20%;
}
.carousel img{
  width:100%;
}