JSFiddle - React, Tailwind, and code Playground

by Deborah

HTML

<div class="container top-nav-bar">
        
        <div class="top-nav-logo-area">
            <span class="logo">B</span>
            <span class="logo">B</span>
            <span class="logo">C</span>
        </div>

        <div class="top-nav-link-div">
            <a class="black-nav-links" href="#">Sign in</a>  
        </div>
</div>

CSS

html,body,p {
        margin: 0;
        padding: 0;
      }

       .container {
            width: 100%;
            margin: 0 auto;
        }
        
        .top-nav-bar {
            /* remove the height and let the margins/paddings on the child divs set it */
            border-bottom: 1px #cccccc solid;
        }
        
        .top-nav-logo-area {
            display: inline-block;
            position: relative; /* makes this container accept positions for the child div */
            margin: 10px; /* equal margin around the logo centers it vertically */
            padding: 10px 20px 10px 10px; /* padding top and bottom centers the border */
            border-right: 1px solid #cccccc;
        }
        
        .top-nav-logo-area:after {
          content: '';
          display: table;
          width: 100%;
        }
        
        .logo {
            background-color: black;
            color: white;
            font-family: monospace;
            font-size: 25px;
        }
        
        .top-nav-link-div {
            display: inline-block;
            height: 100%;
            border-left: 1px grey solid;
            font-weight: bold;
            font-family: sans-serif;
            font-size: 12px;
            color: black;
            position: relative; /* necessary for positioning */
              top: -5px; /* the position adjustment */
            
        }