JSFiddle - React, Tailwind, and code Playground

by Amando Filipe

HTML

<div class="tile">
  <div class="tile__avatar">
    <svg class="tile__avatar__element" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 299.997 299.997" style="enable-background:new 0 0 299.997 299.997;" xml:space="preserve">
      <g>
        <g>
          <path d="M149.996,0C67.157,0,0.001,67.158,0.001,149.997c0,82.837,67.156,150,149.995,150s150-67.163,150-150
            C299.996,67.156,232.835,0,149.996,0z M150.453,220.763v-0.002h-0.916H85.465c0-46.856,41.152-46.845,50.284-59.097l1.045-5.587
            c-12.83-6.502-21.887-22.178-21.887-40.512c0-24.154,15.712-43.738,35.089-43.738c19.377,0,35.089,19.584,35.089,43.738
            c0,18.178-8.896,33.756-21.555,40.361l1.19,6.349c10.019,11.658,49.802,12.418,49.802,58.488H150.453z" />
        </g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
    </svg>

  </div>
  <ul class="tile__meta">
    <li class="tile__title">
      This is my task title
    </li>
    <li class="tile__status">
      Not started
    </li>
    <li class="tile__date">
      Completion date: 21/10/2017
    </li>
  </ul>
</div>

<div class="tile tile--progress">
  <div class="tile__avatar">
    <svg class="tile__avatar__element" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 299.997 299.997" style="enable-background:new 0 0 299.997 299.997;" xml:space="preserve">
      <g>
        <g>
          <path d="M149.996,0C67.157,0,0.001,67.158,0.001,149.997c0,82.837,67.156,150,149.995,150s150-67.163,150-150
            C299.996,67.156,232.835,0,149.996,0z...

SCSS

$gutter: 15px;
.tile {
  margin: $gutter;
  color:grey;
  border: 2px solid currentColor;
  padding: $gutter;
  &--progress{
    color: orange;
  }
  &--overdue{
    color: red;
  }
  &--done{
    color: green;
  }
  &__avatar {
    width: 60px;
    height: 60px;
    display:inline-block;
    & svg{
      fill:black;
    }
  }
  &__meta{
    display:inline-block;
    margin: 0;
    padding: 0 0 0 $gutter*2;
    line-height: 24px;
    & li{
      list-style-type:none;
    }
  }
}

JavaScript

/* Task 1: Tiles
 * Implement a static HTML/CSS document, which contains 4 versions
 * (not started, in progress, overdue and done) of a task tile as 
 * defined in the mockup (please see pre-assessment document).
 * Approximate duration: 30 minutes
 */