JSFiddle - React, Tailwind, and code Playground

by Jonas Myrenås

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<table class="table">
    <tbody>
        <tr>
            <td>
                <ul>
                    <li>
                        <button>
                            <div>why?</div>
                            <div>are these centered vertically?</div>
                            <div>And how to remove it?</div>
                        </button>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

CSS

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
/**
 * Important resets to make life a bit easier
 */
ol,
ul,
dl,
dd,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
table,
th,
td,
caption {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
/**
 * Make alt texts visually different if images doesn't load
 */
img {
  font-style: italic;
}
/**
 * Like cursor: pointer;?
 */
a,
button,
select,
option {
  cursor: pointer;
}
/**
 * Remove outlines.
 * It's important that you give the user some kind of visual
 * confirmation that an element is focused, but do it in ui/main
 * instead of with browser default outlines.
 */
button:not(.outline):focus,
input:not(.outline):focus,
textarea:not(.outline):focus,
div:not(.outline):focus,
button:not(.outline):active,
input:not(.outline):active,
textarea:not(.outline):active,
div:not(.outline):active {
  outline: none;
}
/* remove IE clear marker */
input::-ms-clear {
  display: none;
}
/**
 * Form related resets
 */
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
/**
 * Removing default appearances for input fields in Webkit and Gecko browsers,
 * since otherwise iOS Safari, probably amongst other browsers, would make stuff look a bit bad.
 */
input:not([type="radio"]):not([type="checkbox"]) {
  -webkit-appearance: none;
  -moz-appearance: none;
}
input {
  background-color: transparent;
  border: none;
}
/**
 *  Reset buttons. A lot.
 */
button {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 1;
}
/**
 * Reset height and widths of html and body,  */
html,
body {
  min-width: 100%;
  min-height: 100%;
}
html {
  height: 100%;
  font-size: 62.5%;
}
/**
 * Forcing smooth text in Webkit browsers.
 * One could use the wildcard selector, and not have to worry about inheritance
 * problems (since -webkit-font-smoothing is far from a standard property it
 * doesn't have any standard inheritance definitions it seems), but...