JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div class="md:px-4">
        <div class="md:container md:mx-auto">
            <div class="mb-28">
                <div class="px-4">
                    <h2 class="text-gray-600 mb-6 md:mb-12 text-center">
                        7 ways to style your Kichana
                    </h2>
                </div>
                <div class="px-10 pt-5 md:px-16 md:pt-12 overflow-hidden">
                    <div id="ways-to-wear" class="swiper-container discover-product-carousel pb-12 sm:pb-20 md:pb-24 overflow-visible swiper-container-initialized swiper-container-horizontal">

                        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                            <!-- 1 -->
                            <div class="swiper-slide swiper-slide-prev" style="width: 325.333px; margin-right: 72px;">
                                <div class="media relative overflow-hidden">
                                    <div class="w-full h-full z-20 absolute top-0 left-0"></div>
                                    <img src="./assets/images/product-page/video-placeholder.png" alt="video-placeholder">
                                    <iframe class="vimeo-video" src="https://player.vimeo.com/video/494366203?autoplay=0&amp;autopause=0&amp;autopause=0&amp;background=1&amp;loop=1&amp;title=0&amp;muted=1&amp;controls=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>
                                </div>
                                <div class="pt-4 text-gray-500 text-center">
                                    <h3 class="mb-2">
                                        The Hug
                                    </h3>
                                </div>
                            </div>

                            <!-- 2 -->
                            <div class="swiper-slide swiper-slide-active" style="width: 325.333px; margin-right: 72px;">
           ...