JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://hifive.github.io/hifive-res/fw/current/h5.css">
<script src="https://hifive.github.io/hifive-res/fw/current/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/carousel/src/CarouselController.js"></script>
<div class="carousel-wrapper">
  <div class="item red">
    <p>アイテム1</p>
  </div>
  <div class="item blue">
    <p>アイテム2</p>
  </div>
  <div class="item green">
    <p>アイテム3</p>
  </div>
  <div class="item yellow">
    <p>アイテム4</p>
  </div>
  <div class="item purple">
    <p>アイテム5</p>
  </div>
  <div class="item gray">
    <p>アイテム6</p>
  </div>
</div>

CSS

ul.carousel>li {
	display: block;
}

.carousel-wrapper {
	width: 800px;
	height: 200px;
	margin: 20px 0 20px 0;
	padding: 5px;
	text-align: center;
	vertical-align: center;
	cursor: pointer;
}

.carousel-wrapper .item {
	width: 120px;
	height: 160px;
	line-height: 160px;
}

.red {
	background-color: #F3C0AB;
}

.blue {
	background-color: #99CFE5;
}

.green {
	background-color: #98DE8D;
}

.yellow {
	background-color: #FFF599;
}

.purple {
	background-color: #D27EB3;
}

.gray {
	background-color: #E3E3E3;
}

JavaScript

$(function() {
	h5.core.controller('.carousel-wrapper', h5.ui.components.carousel.CarouselController);
});