JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div class="container">
  <div class="card">
    <div class="header">
      <span class="icon">🌟</span>
      <h2 class="title">Überschrift 1</h2>
    </div>
    <div class="body">
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="header">
      <span class="icon">💡</span>
      <h2 class="title">Überschrift 2</h2>
    </div>
    <div class="body">
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="header">
      <span class="icon">🚀</span>
      <h2 class="title">Überschrift 3</h2>
    </div>
    <div class="body">
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
        <li>Element 7</li>
        <li>Element 8</li>
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="header">
      <span class="icon">🔥</span>
      <h2 class="title">Überschrift 4</h2>
    </div>
    <div class="body">
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
        <li>Element 7</li>
        <li>Element 8</li>
        <li>Element 9</li>
      </ul>
    </div>
  </div>
  <div class="card">
    <div class="header">
      <span class="icon">🌈</span>
      <h2 class="title">Überschrift 5</h2>
    </div>
    <div class="body">
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
        <li>Element 7</li>
        <li>Element 8</li>
        <li>Element 9</li>
        <li>Element 10</li>
     ...

SCSS

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 20px;
  width: 100vw;
  box-sizing: border-box;

  .card {
    flex: 1 1 300px;
    max-width: calc((100% - 4 * 20px) / 5); // Anpassung für 5 Karten in der Normalansicht
    background: #f9f9f9;
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    position: relative;
    z-index: 1; // Ausgangs-Z-Index für alle Karten

    &:hover {
      z-index: 10; // Höherer Z-Index beim Hover, um die Karte in den Vordergrund zu bringen
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); // Optionaler Schatten für visuelle Hervorhebung
    }

    .header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .icon {
        font-size: 24px;
        margin-right: 10px;
      }

      .title {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .body {
      max-height: 120px; // Anfangs sichtbare Höhe für Listenelemente
      transition: max-height 0.3s ease; // Glatte Transition für die Höhenänderung

      ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          padding: 2px 0;

          &:nth-child(n+6) {
            display: none;
          }
        }

        &::after {
          content: "...";
          display: block;
          color: #666;
          font-style: italic;
          padding-top: 5px;
          text-align: center;
        }
      }

      // Erweitert die Höhe und zeigt alle Listenelemente
      &:hover {
        max-height: 1000px; // Eine sehr große Höhe, um alle Listenelemente sichtbar zu machen

        ul li {
          display: list-item;
        }

        &::after {
          display: none;
        }
      }
    }
  }
}