JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div id="versionBox">
  <div class="versionsHeader" >
  <span class="headerText">versions</span>
  </div>
  
  <div class="versionEntriesContainer inline">
  
   
        <div class="versionEntry">
        
          <div class="versionEntryDetails inline">


            <div class="versionTextContainer inline">
              <span class="versionText">V.1.0.0</span>
            </div>


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



          </div>


          <div class="decorationTriangle"></div>


        </div>
        
        
       
    
    </div>
    
    
    <div class="versionsDecoration inline">
      
      
      <div class="decorationBar centered">
      </div>
     
    </div>
    

</div>

CSS

@font-face
{
  font-family:ubuntu;
  src:url(https://demo-project-hutson.c9users.io/fonts/ubuntu.ttf);
}

*
{
  font-family:ubuntu;
  box-sizing:border-box;
}

.versionsDecoration
{
  vertical-align:top;
  
}

.decorationBar
{
  width:10px;
  height:120px;
  border:2px solid rgb(180,180,180);
  border-radius:5px;
  background:white;

}
#versionBox
{
  width:300px;
  
}

.inline
{
  display:inline-block;
}
.versionsHeader
{
  text-align:center;
  padding-top:5px;
  padding-bottom:5px;
  
}

.light-shadow
{
  box-shadow:0 0 2px rgb(230,230,230);
}

.medium-shadow
{
  box-shadow:0 0 2px rgb(210,210,210);
}


.headerText
{
  font-size:1.4em;
}
.versionEntry
{
 
  width:100%;
  cursor:pointer;
}

.versionEntry:hover .versionTextContainer
{
  background:#f0f0f0;
}

.versionEntry:hover .decorationTriangle
{
    background-image:url(https://demo-project-hutson.c9users.io/images/triangle_v2_highlighted.png);
}

.versionTextContainer
{
  width:50%;
  float:left;
  background:white;
  text-align:center;
  border:2px solid rgb(180,180,180);
  padding-top:1px;
}

.versionEntryDetails
{
  width:calc(100% - 20px);
  float:left;
}

.decorationTriangle
{
    margin-top:1px;
  width:20px;
  height:20px;
  background-image:url(https://demo-project-hutson.c9users.io/images/triangle_v2.png);
  background-size:20px 20px;
  
  display:inline-block;
}
.versionText
{
  color:#444;
}

.versionEntriesContainer
{
   
    text-align:right;
    width:280px;
    padding-top:10px;
    padding-left:10px;
}