JSFiddle - React, Tailwind, and code Playground

by alanzam2223

HTML

<div ng-app="myMod" ng-controller="c" ng-init="select = 1">

<div class="versionEntry" >

    <div class="playContainer inline left-float light-shadow" ng-class="{'skyBlue' : select == 1, 'normalVersion' : select != 1}">

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




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


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


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

CSS

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

*
{
  font-family:ubuntu;
  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:220px;
  padding-top:15px;
  padding-bottom:15px;
  
}



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

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

.normalVersion
{
  background:lightgrey;
}

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

.versionEntry:hover .normalVersion
{
  background:grey;
}



.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;
}

.skyBlue
{
  background:deepskyblue;
}

JavaScript

var mod = angular.module('myMod',[]);

mod.controller('c',function(){});