<div class="cards">
    <div class="card">
        <h2 class="title">Card 1</h2>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic magnam, itaque obcaecati, dolorum odio voluptate ratione doloribus ipsa voluptates ipsam, repellat labore voluptatum iure recusandae mollitia impedit delectus? Odit, rerum!</div>
    </div>
    <div class="card">
        <h2 class="title">Card 2</h2>
        <div class="text">Numquam fugiat rerum tempora facilis perferendis facere, ex, iusto accusamus provident molestiae temporibus reprehenderit. Accusantium sequi impedit a, ea harum perferendis deleniti nulla ex, deserunt similique adipisci. Possimus, quibusdam, amet.</div>
    </div>
    <div class="card">
        <h2 class="title">Card 3</h2>
        <div class="text">Distinctio quibusdam similique temporibus, molestias accusamus architecto in. Commodi labore laboriosam velit provident adipisci aspernatur vel facilis, iusto cupiditate repudiandae molestiae, perferendis nobis nemo, et praesentium at illo neque maxime.</div>
    </div>
    <div class="card active">
        <h2 class="title">Card 4</h2>
        <div class="text">Inventore quo molestias, laborum labore eligendi voluptatibus dolore aliquam enim, amet ipsum dolorem. Molestiae quidem, fugit! Ad, illum, impedit. Eveniet necessitatibus delectus repellat, nobis esse quidem neque, officia mollitia cumque.</div>
    </div>
    <div class="card">
        <h2 class="title">Card 5</h2>
        <div class="text">Harum ad nostrum neque quaerat expedita ea quos necessitatibus praesentium dolorum eius consequatur, ullam fugit, saepe doloribus vel consectetur! Dolore nihil deleniti autem maiores possimus incidunt nisi recusandae maxime eius.</div>
    </div>
    <div class="card">
        <h2 class="title">Card 6</h2>
        <div class="text">Iste animi ducimus laborum culpa, excepturi in quo dolorum quasi expedita, mollitia cupiditate. Aperiam neque mollitia animi sapiente ab officiis, tempora voluptatem. Cumque, facilis. Dolores saepe asperiores doloremque illo unde!</div>
    </div>
    <div class="card">
        <h2 class="title">Card 7</h2>
        <div class="text">Commodi explicabo, accusamus ipsum reprehenderit recusandae doloribus dicta. Quam maiores eos tempora voluptatem placeat laboriosam et expedita nostrum eius vitae dignissimos non, architecto sint deleniti autem nam molestiae eligendi facere?</div>
    </div>
    <div class="card">
        <h2 class="title">Card 8</h2>
        <div class="text">Reiciendis saepe dolore quisquam quod earum, illum iste tenetur, maxime nihil enim similique necessitatibus nemo harum rerum sed vero dolorum eius quia quasi incidunt sint culpa labore non quas! Aperiam.</div>
    </div>
    <div class="card">
        <h2 class="title">Card 9</h2>
        <div class="text">Repudiandae, nisi, quibusdam? Iusto architecto adipisci, quisquam, maiores minus perferendis eligendi maxime similique molestias qui quasi porro aperiam deserunt. Odit, id deserunt illum nobis maiores labore earum rem obcaecati aspernatur?</div>
    </div>
    <div class="card">
        <h2 class="title">Card 10</h2>
        <div class="text">Quasi cupiditate illo officia minima fugiat omnis impedit ullam, temporibus modi atque quod, accusantium pariatur sit, facilis vero! Magnam laudantium sapiente, eum. Animi inventore sed aut aliquid deleniti amet asperiores.</div>
    </div>
</div>