JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div id="versionBox">
  <div class="versionsHeader">
    versions
  </div>
  
  <div class="versionEntriesContainer">
  
    <div class="versionEntries inline">
    
        <div class="versionEntry">
        
          <div class="versionTextContainer inline">
            <span class="versionText">V.1.0.0.1</span>
          </div>

          <div class="versionTextContainer inline">
            <span class="versionText">free</span>
          </div>

          <div class="versionEntryDecorationContainer inline">
            <div class="rightEquilateral"></div>
          </div>
        
        </div>
        
        
        
       
    
    </div>
    
    
    <div class="versionsDecoration inline">
      <div class="equilateral">
      </div>
      
      <div class="decorationBar centered">
      </div>
      
      <div class="downEquilateral">
      </div>
    </div>
    
  </div>

</div>

CSS

#versionBox
{
  width:300px;

}

.inline
{
  display:inline-block;
}
.versionsHeader
{
  text-align:center;
  padding-top:5px;
  background:blue;
}
.equilateral
{
  border-right:10px solid transparent;
  border-left:10px solid transparent;
  border-bottom:10px solid white;
}

.rightEquilateral
{
  border-left:10px solid white;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

.downEquilateral
{
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid white;
}

.decorationBar
{
  width:20px;
  height:100px;
  background-color:white;
}

.centered
{
  margin-right:auto;
  margin-left:auto;
}

.versionText
{
  font-size:1.1em;
  color:#616161;
}
.versionTextContainer
{
  padding:5px 8px 5px 5px;
  background:orange;
  vertical-align:top;
}

.versionsDecoration
{
  background:red;
  vertical-align:top;
}

.versionEntriesContainer
{
    background:cornflowerblue;
    text-align:right;
    width:100%;
    
}

.versionEntries
{
   width:calc(100% - 20px);
   background:pink;
   min-height:120px;
   float:left;
   box-sizing:border-box;
   padding-top:10px;
   padding-bottom:10px;
}   



.versionEntry
{
  background:lightgrey;
  box-sizing:border-box;
  
}

.versionEntryDecorationContainer
{
  box-sizing:border-box;
  background:grey;
  padding-top:8px;
}