JSFiddle - React, Tailwind, and code Playground

by blackhawx

HTML

<div id="wrapper">
<div id="homepage-banner">
  <img class="home-carousel" src="images/banner.jpg" />
</div>

<header>
  <div id="logo">
    <img src="images/logo.png" />
  </div>
    
   <div id="header-text">
     <p><span style="font-weight:bold; color: white">></span> Call us now on <strong>0800 785 7348</strong></p>
     <p><span style="font-weight:bold; color: white">></span> <a href="#"  style="font-weight: bold; text-decoration: none; color: black">Click here</a> to enquire online</p>
  </div>

  <div id="nav-bar">
    <img src="images/nav.png"  width="980" height="45"/>
  </div>

</header> 
<!-- header -->
</div>

CSS

#wrapper {
    padding:0;
    margin:0;
    position:relative;
}
header {
    height: 120px;
    width: 980px;
    position:absolute;
    z-index:2;
    top: 25px; 
}

#homepage-banner {
    height: 555px;
    width: 3000px;
    margin-left: -1000px;
    margin-bottom: -210px;
    background-color: rgb(0,173,239);
    position:absolute;
    z-index:1;
}