JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="wrap">
  <div class="card">
    <h4>ABC Gmbh Mainz</h4>
    <p>Installation und Konfiguration <span class="badge">></span></p>
    <p class="footer">
      <i class="fa fa-check-circle"></i>Fakturiert
      <i class="fa fa-calendar"></i>10.Juli 2016
      <i class="fa fa-clock-o"></i>12:00 - 16:00
    </p>
  <div>
</div>

CSS

.wrap {
  background-color: #fff;
  box-shadow: 10px 10px 5px #888888;
}

.card {
  margin: 5px 0;
  border: 1px solid #eee;
  border-left-width: 8px;
  border-left-color: rgba(10, 255, 80, 0.75);
  border-radius: 5px;
}

.card h4,
p {
  padding: 5px;
}

.badge:hover {
  background-color: blue !important;
}

.badge {
  border-radius: 50%;
  background-color: navy;
  color: #fff;
  display: inline-block;
  padding: 4px 8px;
  text-align: center;
  float: right;
  position: relative;
  top: -5px;
}

.footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-bottom: 0px;
}