JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">
<script src="https://unpkg.com/[email protected]/min/moment.min.js"></script>
<script src="https://unpkg.com/[email protected]/min/locales.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/feather.min.js"></script>
<div id="app">

    <div class="swiper-container slider-campaigns">
        <div class="swiper-wrapper">

            <div class="swiper-slide campaign-slide" v-for="campaign in campaigns" v-bind:key="campaign">

                <div class="campaign-posts">

                    <div class="swiper-container slider-posts">
                        <div class="swiper-wrapper">

                            <div class="swiper-slide post-slide" v-for="post in posts" v-bind:key="post" :style="'background-image:url(' + image + '?' + campaign + '-' + post + ')'">
                                <a class="slide-body" :href="'#campaign-' + campaign + '-' + post">
                                    <h3 class="slide-title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h3>
                                    <p class="slide-date">{{ moment().format('LL') }} <i data-feather="calendar"></i></p>
                                </a>
                            </div>

                        </div>
                    </div>

                </div>

                <div class="campaign-image" :style="'background-image:url('+image+'?'+campaign+')'">

                    <div class="campaign-body">
                        <h2 class="campaign-title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
                        <p class="campaign-excerpt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient...

SCSS

body {
    margin: 0;
}

#app {
    background: #222;
}

.swiper-slide {
    background-size: cover;
    background-position: 50%;
}

.slider-campaigns {
    width: 100%;
    height: 600px;

    .campaign-slide {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #fff;
    }

    .campaign-posts {
        flex: 0 0 300px;
        max-width: 300px;
    }

    .campaign-image {
        background-size: cover;
        background-position: 50%;
        flex: 1 1 auto;
        max-width: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .campaign-body {
        position: relative;
        padding: 3rem;
        color: #fff;
        z-index: 0;
    }

    .campaign-body::before {
        background: linear-gradient(0, rgba(0,0,0,0.8), transparent);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200%;
        content: ' ';
        z-index: -1;
    }

    .campaign-title {
        font-size: 2.4rem;
        margin: 0;
    }

    .campaign-details {
        display: flex;
        flex-wrap: wrap;
        font-size: 1rem;
        margin: .5rem -.8rem -.5rem;
    }

    .campaign-details > * {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #fff;
        padding: .5rem .8rem;
        transition: 0.2s;
    }
    
    .campaign-details > *:hover {
        opacity: 0.5;
    }

    .campaign-companion {
        box-sizing: border-box;
        border: 1px solid #fff;
        border-radius: 100px;
        object-fit: cover;
        object-position: 50%;
    }
    
    .campaign-icon {
        width: 1.2em;
        height: 1.2em;
        margin-right: 0.5rem;
    }
}

.slider-posts {
    height: 100%;

    .swiper-slide {
        position: relative;
        text-align: right;
        z-index: 0;
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid...

JavaScript

moment.locale('de');

new Vue({
    el: '#app',
    data: {
        image: 'https://source.unsplash.com/random/1280x1024',
        campaigns: 6,
        posts: 5,
    },
    mounted: function() {

        var mySwiper = new Swiper('.slider-campaigns', {
            keyboard: true,
            nested: true,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

        var mySwiper = new Swiper('.slider-posts', {
            direction: 'vertical',
            slidesPerView: 3,
            freeMode: true,
            mousewheel: true,
        });
    }
});