JSFiddle - React, Tailwind, and code Playground

delete this one

by Christopher O

HTML

<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.css" /> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/Marak/faker.js/master/examples/browser/js/faker.js"></script>

<script src="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.min.js"></script>

<div id="app">
  <input placeholder="Search" type="text" class="headSearchBox" v-model="headSearch" /> Records: {{dispCount}}
  <my-list :list="listSorted"></my-list>
  <p>{{someInfo}}</p>
</div>

CSS

.scroller {
  overflow-y: auto;
  overflow-x: none;
  height: 240px;
  width: 300px;
  border: 1px solid blue;
  margin-top:5px;
}

.lstdiv {
  height: 50px;
  border-bottom: 1px solid grey;
  white-space: nowrap;
  padding: 5px 0 5px 2px;
}

.lstdiv:hover {
  background: lightblue;
  /* color: white; */
}

.headSearchBox{
  width:150px;
}
.avtr {
    width:50px;
    height:50px;
    border-radius: 50%;
    border: 1px solid #ccc;
    margin: 0 5px 0 0;
    float:left;
    background-size: 50px 50px;
    background-color:#ccc;
    position:relative;
    background-image:url('https://secure.gravatar.com/avatar/bfc977bcf4cd0c3362f6e50d3e9d1760?s=128&d=mm&r=g');
}

.avch{
  color:#fff;
  position:absolute;
  bottom:-2px;
  right:-2px;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  text-shadow: 2px 2px 4px #aaa;
}
.avch:hover{
  color:#00f;
}
/*   ---------------------------------------------   */
.lstname{
  /* float:left; */
  font-weight:bold;
}
.lstwhen{
  float:right;
}
.lstmsg{

}
.cicon{
  margin-left: 15px;
  font-size: 12px;
  opacity: 0.5;
}

.cinfo{
  margin-left: 5px;
  font-size: 12px;
  opacity: 0.8;
}


.ur{
    float:right;
    display: block;
    color: #fff;
    font-weight:bold;
    /*border: 1px solid #AEAEAE;*/
    border-radius: 30px;
    background-color: lightgreen;
    font-size: 10px;
    line-height: 0px;
    padding: 8px;
}

/*  BEGIN Convo Del Button  */
div.lstdiv:hover input.deleteBtn {
    display: block;
}
div.lstdiv input.deleteBtn {
    position:absolute; /* parent must have "position: relative" hardset; */
    display:none;
    top:-7px;
    left:1px;
}

.deleteBtn{
    cursor:pointer;
    color: #000;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #ddd;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 8px 3px;
    opacity: 0.4;
}
.deleteBtn:hover{
  background: #f00;
  border: 1px solid #f00;
  color: #fff;
 ...

JavaScript

console.clear();

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// var thisrunid = faker.name.findName();
// console.log("## Begin ID: "+thisrunid);

// ----  BEGIN TA  ------------------------------------------------------
var TAlastRun = 0; // timestamp

var TAtemplateProps = {
    prefix: "",
    suffix: "",
    seconds: "0m",
    minute: "1m",
    minutes: "%dm",
    hour: "1h",
    hours: "%dh",
    day: "1d",
    days: "%dd",
    month: "1mo",
    months: "%dmo",
    year: "1y",
    years: "%dy"
};

var TAtemplate = function (t, n) {
    return TAtemplateProps[t] && TAtemplateProps[t].replace(/%d/i, Math.abs(Math.round(n)));
};

var TAsingle = function (pastTime,nowObj) {
    if (!pastTime) return;
    if(!Number.isInteger(pastTime)){
      pastTime = pastTime.replace(/\.\d+/, ""); // remove milliseconds
      pastTime = pastTime.replace(/-/, "/").replace(/-/, "/");
      pastTime = pastTime.replace(/T/, " ").replace(/Z/, " UTC");
      pastTime = pastTime.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); // -04:00 -> -0400
    }
    pastTime = new Date(pastTime * 1000 || pastTime);
  
    var seconds = ((nowObj.getTime() - pastTime) * 0.001) >> 0;
    var minutes = seconds / 60;
    var hours = minutes / 60;
    var days = hours / 24;
    var years = days / 365;

    return TAtemplateProps.prefix + (seconds < 45 && TAtemplate('seconds', seconds) || seconds < 90 && TAtemplate('minute', 1) || minutes < 45 && TAtemplate('minutes', minutes) || minutes < 90 && TAtemplate('hour', 1) || hours < 24 && TAtemplate('hours', hours) || hours < 42 && TAtemplate('day', 1) || days < 30 && TAtemplate('days', days) || days < 45 && TAtemplate('month', 1) || days < 365 && TAtemplate('months', days / 30) || years < 1.5 && TAtemplate('year', 1) || TAtemplate('years', years)) + TAtemplateProps.suffix;
};

/*  Run on all elements with timeago class  */
function timeAgo() {
    // console.log('timeAgo');
    var now = new Date();
   ...