JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="carousel">
  <a class="carousel-item" href="#e!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#ree!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/3"></a>
  <a class="carousel-item" href="#ur!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/4"></a>
  <a class="carousel-item" href="#five!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/5"></a>
</div>
<div class="carousel">
  <a class="carousel-item" href="#e!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#ree!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/3"></a>
  <a class="carousel-item" href="#ur!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/4"></a>
  <a class="carousel-item" href="#five!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/5"></a>
</div>
<div class="carousel">
  <a class="carousel-item" href="#e!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/1"></a>
  <a class="carousel-item" href="#two!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/2"></a>
  <a class="carousel-item" href="#ree!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/3"></a>
  <a class="carousel-item" href="#ur!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/4"></a>
  <a class="carousel-item" href="#five!"><img class="materialboxed" src="https://lorempixel.com/250/250/nature/5"></a>
</div>
<script...

JavaScript

var options = {};

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.carousel');
  var instances = M.Carousel.init(elems, options);
});

$(document).ready(function() {
  $('.materialboxed').materialbox();
});