JSFiddle - React, Tailwind, and code Playground

by hieuns

HTML

<ul class="vmenu-flex">
  <li><img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/facebook.png"/>Facebook</li>
  <li><img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/googleplus.png"/>Google+</li>
  <li><img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/twitter.png"/>Twitter</li>
  <li><img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/reddit.png"/>Reddit</li>
</ul>

CSS

.vmenu-flex {
  display: inline-block;
  list-style: none;
  padding-left: 0;
  font-size: 15px;
}
.vmenu-flex li {
  display: flex;
  align-items: center;
  padding: 5px 8px 6px 8px;
  margin-bottom: 2px;
  background-color: #f0fff0;
  border: solid 1px lightgray;
}
.vmenu-flex img {
  margin-right: 6px;
}