JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="swiper" >
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="card">
                <div class="card-content">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового собрал злых грамматики ipsum большого переписали, ведущими единственное продолжил алфавит оксмокс жизни, путь живет, заголовок выйти ее рекламных составитель!</div>
                <div class="card-actins">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</div>
            </div>
        </div>
        
        <div class="swiper-slide">
            <div class="card">
                <div class="card-content">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового собрал злых грамматики ipsum большого переписали, ведущими единственное продолжил алфавит оксмокс жизни!</div>
                <div class="card-actins">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</div>
            </div>
        </div>
        
        <div class="swiper-slide">
            <div class="card">
                <div class="card-content">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</div>
                <div class="card-actins">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</div>
            </div>
        </div>
    </div>
</div>

CSS

.swiper-wrapper {
    display: flex;
}
.swiper-slide {
    width: 25%;
    display: grid;
    background-color: #eeee;
}