JSFiddle - React, Tailwind, and code Playground

by alanzam2223

HTML

<div class="versionEntry">

  <div class="playContainer inline left-float">
    <img class="playImage" src="https://demo-project-hutson.c9users.io/images/greenCircledButton.png" />
  </div>
  
  <div class="stats inline left-float light-shadow">
    <div class="versionTextContainer inline">
      <span class="versionEntryText">V1.0.0</span>
    </div>
    
    <div class="versionTextContainer inline">
      <span class="versionEntryText">free</span>
    </div>
  </div>

</div>

CSS

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

*
{
  font-family:ubuntu;
}

div
{
  box-sizing:border-box;
}

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

.inline
{
  display:inline-block;
}
.left-float
{
  float:left;
}
.right-float
{
  float:right;
}

.versionEntry
{
  width:200px;
}
.versionTextContainer
{
  width:48%;
  text-align:center;
  
}

.playContainer
{
  background:deepskyblue;
  padding:5px;
  border-top-right-radius:8px;
  border-bottom-left-radius:8px;
  cursor:pointer;
}


.versionEntry:hover .playContainer
{
  background:#00b0ff;
}



.playImage
{
  width:15px;
  height:15px;
}
.stats
{
  width:80%;
  background:white;
  padding-top:5px;
  padding-bottom:5px;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  position:relative;
  top:2px;
  cursor:pointer;
  
}

.versionEntry:hover .stats
{
  background:rgb(250,250,250);
}

.versionEntryText
{
  color:#616161;
}

.deeperBlue
{
  color:#0099cc;
}