JSFiddle - React, Tailwind, and code Playground

by Ian Sadovy

HTML

<body>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<div class="icon-div xl"></div>
<div class="icon-div csv"></div>
<div id="icon">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>
<table class="table table-bordered" style="width:320px">
<tbody><tr>
  <th>Email</th>
  <th>Result</th>
</tr>
<tr>
  <td>[email protected]</td>
  <td><code class="text-success">Valid</code></td>
</tr>
<tr>
  <td>[email protected]</td>
  <td><code class="text-success">Valid</code></td>
</tr>
<tr>
  <td>[email protected]</td>
  <td><code>Invalid</code></td>
</tr>
<tr>
  <td>[email protected]</td>
  <td><code class="text-success">Valid</code></td>
</tr>
</tbody></table>
  




</body>

CSS

body {
  font-family: monospace !important;
  padding: 20px;
}
table {
  margin-bottom: 0 !important;
}
#icon {
  width:320px;
  text-align:center;
  padding: 10px 0;
}
.icon-div {
  display: inline-block;
  width: 160px;
  height: 80px;
  background-size:80px 80px;
  background-position: center center;
  background-repeat: no-repeat
}

.xl {
  background-image: url(http://www.freeiconspng.com/uploads/excel-png-office-xlsx-icon-3.png);
}

.csv {
  background-size:70px 70px;
  background-image: url(http://image.flaticon.com/icons/svg/28/28978.svg)
}