JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">

<div class="swiper-container">

    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p>
            
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda odit odio rem nobis aspernatur quibusdam, magni aliquam reiciendis rerum temporibus deleniti facere itaque, quia iure, provident dolor quos iste enim.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempore esse, laboriosam magnam eos fugiat omnis facere quibusdam sapiente minima, dicta. Molestiae, dolore laborum debitis possimus soluta neque voluptatem repellat.</p>
        </div>
        <div class="swiper-slide">
            <p>
            
            
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ipsam, voluptatum. A excepturi, assumenda corrupti velit tempore quam doloremque natus temporibus error aliquam consectetur, cum dolor porro sunt? Debitis, vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro hic tempora voluptates vero in, autem fugiat pariatur quasi natus, ratione amet impedit commodi, ullam earum quisquam aliquam ea quia. Ea.
            
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora est voluptatem nesciunt odit autem quam adipisci cum eaque! Laborum voluptatem repellat animi quisquam, ratione nam quos debitis aspernatur et facilis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut dolore neque. Vel quae rem, accusantium possimus assumenda numquam molestiae nesciunt quia esse minima vero animi sunt recusandae? Perspiciatis, deleniti.</p>
        </div>
        <div class="swiper-slide">
            <p>
            
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sunt pariatur perferendis, at voluptatem...

CSS

div#box {
    height: 500px;
    background: red;
}
.body {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
}
.box {
    border: 1px solid black;
    height: auto;
}
.box div{
    /* border: 1px solid red; */
    /* height: auto; */
}

.swiper-slide{
    border: 1px solid red;
    height: auto;
}

JavaScript

var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
})