Carousel Slide - Copy this React, Tailwind Component to your project
<section class="carousel md:pt 6 pt 4" dir="ltr" aria label="Gallery" tabindex="0"> <div class="carousel__viewport"> <ol class="carousel__track" style="transform:translateX(0px);transition:0ms;margin:;width:100%;"> @foreach ($item['data'] as $key => $movie) {{ @php $xClass = 'item'; if ($key === 0 || $key % 4 === 0) { $xClass .= ' no margin left'; } @endphp }} <li style="width: 20%;" class="carousel__slide carousel__slide visible carousel__slide active" aria hidden="false"> <article class="w full mr 4 flex flex col items center rounded md group text gray 50 relative overflow hidden pb 2 bg [#181818]"> <a title="Phim Đấu La Đại Lục 2 (Tuyệt Thế Đường Môn) 2023" href="/dau la dai luc 2 tuyet the duong mon" class="relative w full"><img onerror="this.setAttribute('data error', 1)" alt="Đấu La Đại Lục 2 (Tuyệt Thế Đường Môn) 2023" loading="lazy" data nuxt img="" srcset="https://image.animehaytv.cc/anime/dau la dai luc 2 tuyet the duong mon x350.webp 1x, https://image.animehaytv.cc/anime/dau la dai luc 2 tuyet the duong mon x350.webp 2x" title="Phim Đấu La Đại Lục 2 (Tuyệt Thế Đường Môn) 2023" src="https://image.animehaytv.cc/anime/dau la dai luc 2 tuyet the duong mon x350.webp" class="object cover object center w full h 48 rounded xl sm:rounded md bg zinc 800 scale 105 group hover:scale 110 ease in duration 200"></a> <div class="mt 3 px 2 w full"><a title="Phim Đấu La Đại Lục 2 (Tuyệt Thế Đường Môn) 2023" href="/dau la dai luc 2 tuyet the duong mon"> <h3 class="text [15px] font medium capitalize pt 1 block truncate">Đấu La Đại Lục 2 (Tuyệt Thế Đường Môn)</h3><span class="text sm font medium text gray 400 truncate">Soul Land 2: The Peerless Tang Clan</span> </a></div><span class="font medium text xs py [4px] px 2 block rounded br md rounded tr md bg red 800 opacity 90 absolute top 2 left 0 shadow lg shadow red 900/20">Tập 67</span><span class="font medium text xs py 1 px 2 block rounded bl md rounded tl md bg zinc 600 absolute bottom [65px] right 0 shadow lg shadow red 900/20">4K</span> </article> </li> @endforeach </ol> </div> </section>
