JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<ul>
  <li><span class="bubble">food</span><img src="http://lorempixum.com/100/200/food/" /></li>
  <li><span class="bubble type-a">sports</span><img src="http://lorempixum.com/100/200/sports/" /></li>
  <li><span class="bubble type-b">animals</span><img src="http://lorempixum.com/100/200/animals/" /></li>
  <li><span class="bubble type-c">nature</span><img src="http://lorempixum.com/100/200/nature/" /></li>
</ul>

CSS

body {
  background-color: #aaa;
  font-family     : "Arial", sans-serif;
}

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

li {
  position: relative;
  float   : left;
  margin  : 20px;
  padding : 0;
}

img {
  width : 100px;
  height: 200px;
}

.bubble {
  display              : block;
  position             : absolute;
  top                  : -15px;
  left                 : -15px;
  padding              : 5px;
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  border-radius        : 10px;
  background           : #fff;
  font-size            : 20px;
  text-align           : center;
}

.bubble:after {
  position: absolute;
  content : "";
}

.type-a:after {
  right       : 10px;
  bottom      : -10px;
  border-width: 10px 0 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width       : 0;
  height      : 0;
}

.type-b:after {
  left                 : 25px;
  bottom               : -8px;
  z-index              : 0;
  -webkit-border-radius: 50%;
  -moz-border-radius   : 50%;
  border-radius        : 50%;
  width                : 15px;
  height               : 15px;
  -webkit-box-shadow   : 7px 14px 0 -3px #fff, 14px 25px 0 -5px #fff;
  -moz-box-shadow      : 7px 14px 0 -3px #fff, 14px 25px 0 -5px #fff;
  box-shadow           : 7px 14px 0 -3px #fff, 14px 25px 0 -5px #fff;
  background           : #fff;
}

.type-c:after {
  left        : 2px;
  bottom      : -20px;
  border-width: 23px 0 0 13px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width       : 0;
  height      : 0;
}