JSFiddle - React, Tailwind, and code Playground

by mikecmpbll

HTML

<div class="unit" style="width: 600px">
    <div class="unit-header">
      Alerts
    </div>
    <div class="unit-body">
      <div class="alerts">
        <div class="alert-row">
          <div class="alert-type" style="background-color: #009900">
            I
          </div>
          <div class="alert-main">
            <div class="alert-cell">
              Joe Bloggs<br />
              <div class="category" style="background-color: #ee0000; color: #fff">
                Home Issues
              </div>
              <div class="category" style="background-color: #0000ee; color: #fff">
                Child Protection
              </div>
            </div>
            <div class="alert-cell">
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABiElEQVQ4jZWTPU4jQRCFC8MSIMjJYQGLcC/gC0CANAmypypyQIIIbIF4BRNhukrA7nrJyZB8hl24wwo2AwlzAH5OQDDYO26MBRX1VL/5pudVP6Koaghl0XDEsCtWf2D1B4H9ZTWXnYOlWN+vJMkmWb0tajcpbJNhc0Q0RpSVqtuteYZtMfyW1X98q9e/vH0Zfsnw82Qjm/7fT8aJslLvebUZZkStI/A/SZJN9gGifsrw8/hUvGtNQWjEfVHrsHo7F+nhsqjdFL9cAOzxru3F/dVmmGH4bQ2hTAL7nsI2h/nyHoCIKPfEjolh/14N+xSgut2aF/VrYvWnolExIIXvD9sjykqs/kQCex5wtFCCVoXV7msI5fcB6tejLkgNYU3g3VizDvvKsCtiDSfDRhVDWO2uUskm+r8H2xINR/kY4d2VejY1CiINm+2tB8b4Svsl8LNRgAGYWieF/ew38hzYhcDPRp2kd5VZ7ffwPKi3Bd4VhEa6c7CQiz4QpmIV4yywx2KcqwiLsf4F/wzUJdSX0gwAAAAASUVORK5CYII="/> <small>10 hours ago</small><br />
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABJElEQVQ4jZ2Rv2rCUBSHz6q4iIvt5uqjCI6BEpt77+S/RTJYTPO7EBCjOWdoH8PBF/BFnKU4VsjgKLSDBZEYknrg2+733cu5RHfGw7xlwGsD+brAaw/z1r2zmXF8v2Ige2Pl5wbI3vH9SmFAWXEz8h/KilsYMJBVXsBAViUC/JkX0Db5KAxo8Cg3AB4V7yCIGwacZp/PqQriRmGAiMgDdzTkdL1ZTh64U0p2Z8t6L4jbL2/Js4IMFGTw+r546gVx250t67miM45qOmQYcKohZ215o8ATBZ5oyxsNORtwqkOGM45qN7KZclNDDrnfl1mmHMyUm9eA5UVZ+QoviIio24+qxsrx/wE5dvtRlUyYDB+QL4TJkDR492hAg3ekwVsN/n6Q7S+SUXsDVxoY/AAAAABJRU5ErkJggg=="/> <small>Mike Campbell</small>
            </div>
          </div>
        </div>
...

CSS

body {
      padding: 0;
      margin: 0;
      background-color: #F7F7F7;
      font-family: Helvetica, Verdana, Arial, sans-serif;
    }

    .unit {
      background-color: #fff;
      margin: 10px;
    }

    .unit-header {
      background-color: #333;
      color: #fff;
      padding: 15px;
      line-height: 1.2em;
    }

    .unit-body {
    }

    .alerts {
      display: table;
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
    }

    .alert-row {
      display: table-row;
      height: 50px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }

    .alert-type {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 50px;
      height: 100%;
    color: #fff
    }

    .category {
      display: inline-block;
      padding: 0px 15px;
      margin: 5px 0px;
      line-height: 2em;
      font-size: 0.7em;
      cursor: pointer;
    }

    .alert-cell {
      display: table-cell;
      padding: 5px;
    vertical-align: middle;
    }