JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<header>
  <div class="container">
    <div class="logo"></div>
    <ul>
      <li>
        <img src="http://picsum.photos/40/40" alt="">
        <div>call u</div>
        <div>Instagram</div>
      </li>
    </ul>
  </div>
</header>

CSS

body {
  margin: 0;
  overflow-x: hidden;
}
header{
  width: 100%;
  position: relative;
  background: #eee;
}
header div.container {
  max-width: 560px;
  margin: auto;
  padding: 0 30px;
  position: relative;
}
header div.container:after {
  content: '';
  display: table;
  clear: both;
}
div.logo {
  width: 60px;
  height: 100px;
  background: darkred;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
}
header ul {
  float:right;
  margin: 0;
  padding: 0;
}
header ul li {
  list-style: none;
}
header ul li img {
  display: inline-block;
}

JavaScript

console.log($('.box').offset().top)