JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="day">4/18</div>
  <div class="day">4/19</div>
  <div class="day tip">4/20</div>
  <div class="day">4/21</div>
  <div class="day">4/22</div>
  <div class="day">4/23</div>
  <div class="day">4/24</div>
  <div class="day">4/25</div>
  <div class="day">4/26</div>
  <div class="day">4/27</div>
  <div class="day">4/28</div>
  <div class="day">4/29</div>
</div>

CSS

.wrap {
  border-top: 2px solid;
  margin: 5em 1em 0;
  width: 2500px;
}
.day {
  display: inline-block;
  margin: .5em .5em 0;
  padding: .5em;
  position: relative;
}
.day::before {
    bottom: 102%;
    content: "●";
    display: block;
    font-size: 70%;
    left: 50%;
    margin-left: -.5em;
    position: absolute;
}
.tip::after {
    bottom: 102%;
    background: white none repeat scroll 0 0;
    border: 1px solid;
    content: "tip!";
    display: block;
    margin-bottom: 1.5em;
    margin-left: -.5em;
    padding: .5em;
    position: absolute;
}