JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

CSS

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of contents */
  line-height: 40px; /* control height with line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
div i {
  margin-right: 10px;
}
div {
  background-color: hsla(0, 0%, 87%, 0.5);
}
div:hover {
  background-color: hsla(34, 100%, 52%, 0.5);
  cursor: pointer;
}