JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<h1>People</h1>
<ul>
    <li>Elena Gilbert <a href="http://en.wikipedia.org/wiki/Nina_Dobrev">more...</a></li>
    <li>Stefan Salvatore <a href="#">more...</a></li>
    <li>Damon Salvatore <a href="#">more...</a></li>
    <li>Bonnie Bennett <a href="#">more...</a></li>
</ul>    
<h1>Powers</h1>
<ul>
    <li>Vampire <a href="#">more...</a></li>
    <li>Witch <a href="#">more...</a></li>
    <li>Werewolf <a href="#">more...</a></li>
    <li>Hybrid <a href="#">more...</a></li>
</ul>

CSS

body { font-family: Helvetica, Arial, sans-serif; }

h1 { 
   display:block; padding:0.4em;
   background:#4ab; color:#fff; 
   font-size:1em;
   box-shadow:0.01em 0.1em 0.4em rgba(0,0,0,0.4);
   border-bottom:#999 1px solid;
}

ul {
  list-style-type: none; padding:0;
}

li {
  display:inline-block;
  font-weight:bold;
  margin:1em; padding:1em;
  border:#fff 1px solid;
  background:#feb;   
  box-shadow:0.01em 0.2em 0.5em rgba(0,0,0,0.3);
  /*width:12em; */
  text-align:center;
}

li a {
 text-decoration:none;
 font-size:0.7em;
 position:relative;
 top:0.5em;
 left:0.9em;
 color:#44a;
}