JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<ul>
  <li>
    <a href="/partners-page-03/coaching" target="HW_Mainframe">Coaching</a>

    <span class="objectAttributes">
      <span class="desc"
        >Phasellus ac eros at urna condimentum lacinia. Pellentesque habitant
        morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Sed bibendum, sapien a venenatis fermentum, mauris augue cursus turpis,
        vitae elementum massa orci sit amet massa. In hac habitasse platea
        dictumst.</span
      >
    </span>

    <ul>
      <li>
        <a
          href="/partners-page-03/coaching/coaching-for-new-parents.html"
          target="HW_Mainframe"
          >Coaching for new parents</a
        >

        <span class="objectAttributes"> </span>
      </li>

      <li>
        <a
          href="/partners-page-03/coaching/coaching-program.html"
          target="HW_Mainframe"
          >Coaching Program</a
        >

        <span class="objectAttributes"> </span>
      </li>

      <li>
        <a
          href="/partners-page-03/coaching/Partner%20Coaching%20Information%20Sheet%28100170877.1%29.docx"
          target="HW_Mainframe"
          >Information Sheet&nbsp;<img
            src="/wavemaster.internal/webapp/uistyle/hwdefault/icons/msword.png?cachekeY=6848f1fc-en-hwdefault0"
            title="Word 2010"
            border="0"
        /></a>

        <span class="objectAttributes"> </span>
      </li>

      <li>
        <a
          href="/partners-page-03/coaching/library-of-bios.html"
          target="HW_Mainframe"
          >Library of bios</a
        >

        <span class="objectAttributes"> </span>
      </li>
    </ul>
  </li>

  <li>
    <a href="/partners-page-03/meetings" target="HW_Mainframe">Meetings</a>

    <span class="objectAttributes">
      <span class="desc"
        >Mauris ac sapien non felis scelerisque tincidunt. In hac habitasse
        platea dictumst. Sed cursus libero id...

CSS

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .card-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }
        .card {
            width: 300px;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
            transition: transform 0.2s;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .card-title {
            background-color: #007bff;
            color: white;
            padding: 15px;
            font-size: 1.2em;
            font-weight: bold;
            text-align: center;
        }
        .card-description {
            padding: 15px;
            font-size: 1em;
            color: #333;
            min-height: 80px;
        }
        .card-links {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: #f9f9f9;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        .card:hover .card-links {
            transform: translateY(0);
        }
        .card-links ul {
            list-style: none;
            padding: 15px;
            margin: 0;
        }
        .card-links li {
            margin: 10px 0;
        }
        .card-links a {
            text-decoration: none;
            color: #007bff;
            font-size: 0.9em;
        }
        .card-links a:hover {
            text-decoration: underline;
        }
        .arrow {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding: 10px 0;
            background-color: white;
            transition: transform 0.3s...

JavaScript

function adjustCardHeights() {
            const cards = document.querySelectorAll('.card');
            const rows = [];
            let currentRow = [];
            let maxHeight = 0;

            // Group cards by rows based on their offsetTop
            cards.forEach(card => {
                if (currentRow.length === 0 || card.offsetTop === currentRow[0].offsetTop) {
                    currentRow.push(card);
                } else {
                    rows.push(currentRow);
                    currentRow = [card];
                }
            });
            if (currentRow.length > 0) rows.push(currentRow);

            // Adjust heights for each row
            rows.forEach(row => {
                maxHeight = 0;
                const linksHeights = [];

                // Calculate the maximum height of the links section in the row
                row.forEach(card => {
                    const links = card.querySelector('.card-links');
                    links.style.transform = 'translateY(0)';
                    const height = links.offsetHeight;
                    linksHeights.push(height);
                    links.style.transform = 'translateY(100%)';
                });

                const maxLinksHeight = Math.max(...linksHeights);

                // Apply the maximum links height to all cards in the row
                row.forEach(card => {
                    const links = card.querySelector('.card-links');
                    links.style.height = `${maxLinksHeight}px`;
                    card.style.height = `${card.offsetHeight + maxLinksHeight}px`;
                });
            });
        }

        window.addEventListener('load', adjustCardHeights);
        window.addEventListener('resize', adjustCardHeights);