JSFiddle - React, Tailwind, and code Playground

by Tyler Buchanan

HTML

<div>
  <custom-element>
    <a href="#"><img src="http://placehold.it/100x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/101x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/102x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/103x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/104x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/105x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/106x100" alt=""></a>
    <span>taco taco</span>
    <img src="http://placehold.it/100x100" alt="">
  </custom-element>
</div>

CSS

div {
  max-width: 375px;
  max-height: 667px;
}
custom-element {
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #888;
  overflow-x: scroll;
}
custom-element > * {
  display: inline-flex;
  position: relative;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  margin: 0 8px;
}
custom-element > *:not(:first-child) {

}