JSFiddle - React, Tailwind, and code Playground

by Dave Hope

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
	<div id="hero-carousel" class="uk-container-expand">
		<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider="center: true; autoplay: true; autoplay-interval: 3000;">
			<ul class="uk-slider-items uk-grid">
				<li class="uk-width-3-4">
					<div class="uk-panel">
						<img src="http://via.placeholder.com/600x300/333/fff" alt="">
						<div class="uk-position-center uk-panel">This is some extra text</div>
					</div>
				</li>
				<li class="uk-width-3-4">
					<div class="uk-panel">
						<img src="http://via.placeholder.com/600x300/333/fff" alt="">
						<div class="uk-position-center uk-panel"></div>
					</div>
				</li>
				<li class="uk-width-3-4">
					<div class="uk-panel">
						<img src="http://via.placeholder.com/600x300/333/fff" alt="">
						<div class="uk-position-center uk-panel"></div>
					</div>
				</li>
			</ul>
			<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
			<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
		</div>
	</div>