JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<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>

CSS

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

*
{
  font-family:ubuntu;
  box-sizing:border-box;
}
.inline
{
  display:inline-block;
}
.versionEntry
{
 
  width:180px;
  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);
  
}

.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:#313131;
}