JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<div id="fullpage">
  <div class="section">
    <div class="ks_logo">
      <img class="icimg" src="https://image.ibb.co/kwPGb5/kirusoft_withcolor.png" alt="">
      <div class="opts">
        <div class="opts_itms">Home</div>
        <div class="opts_itms">Projects</div>
        <div class="opts_itms">About</div>
      </div>
    </div>
  </div>
  <div class="section">
    Hi there!
  </div>
</div>

CSS

* {
  margin: 0em;
  background-color: white;
  font-family: Open Sans, Arial, Helvetica, sans-serif;
}

.section {
  verticalCentered: true
}

.ks_logo {
  padding: 1.9em 2em 2em 2.7em;
}

.icimg {
  width: 8.5em;
}

.opts {
  float: right;
  display: inline-flex;
}

.opts_itms {
  padding: 0em 1em;
}

.opts_itms:hover {
  color: cornflowerblue;
  cursor: pointer;
}

.opts_itms:before {
  top: 0;
  left: 0;
  content: '';
  height: .3em;
  width: 4em;
  background-color: black;
  position: absolute;
}