JSFiddle - React, Tailwind, and code Playground

by hrebejk

HTML

<div class="token" id="outside">

  <div class="token" id="inside1">
    Name or Logo
  </div>
  
  <div class="token"id="inside2">     
       <div class="token">About <div style="border: 1px solid blue;" class="token sub">Me<div class="token sub">
       dddd
       </div><div>
       
       </div></div></div>
       <div class="token">(Work)</div>
       <div class="token">Resume...
         <div class="token">(Work)
           <div class="token">(Work)</div>
         </div>
       </div>     
  </div>
  
</div>

CSS

.token  {   
  display: inline-flex;
  text-align: baseline;
  line-height: 50px;
  height: 50px; 
  margin-top: -1px;
  box-sizing: border-box;
  border-top: 1px dotted yellow; 
  border-bottom: 1px dotted yellow; 
  position: relative;
}

.sub {
  font-size: 60%;
  padding-top: 8%;  
  /* text-align: bottom; */
}

#outside {
  background-color: #EEBBBB;      
  border-bottom: 1px dotted yellow;
}

#inside1
{
  flex: 0 0 auto;
  background-color: lightblue;
  font-size: 22px;    
  border-bottom: 1px solid red;
}

#inside2 {
  display: flex;
  border-bottom: 1px dotted green;
}

#inside2 div {
  margin-left: 10px;
  border-bottom: 1px solid gray;
}