JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<button type="button" value="overview">Liste</button>
<button type="button" value="textview">Nur Text</button>
<button type="button" value="fullview">Ausführlich</button>
<button type="button" value="cardview">Raster</button>
<button type="button" value="foo">Stillos</button>
<section class="preisliste textview">
<a href="cooler_schrank.html">
  <figure>
    <figcaption>799€, Kühlschrank, Effizienzklasse H</figcaption>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Koelkast_open.jpg/180px-Koelkast_open.jpg" alt="Kühlschrank"> 
    <p>Edles Kühlmöbel mit jahrzehntelanger Kühltechnik-Erfahrung. Die Patina und leichte Gebrauchsspuren bezeugen den intensiven Einsatz dieses Prachtstücks für die Erhaltung der Lebensmittelfrische<span class="fulltext">. Mit diesem unglaublich günstigen Angebot treiben wir uns selbst in den Ruin, greifen Sie zu, solange es noch möglich ist.</p>
  </figure>
</a>
<a href="cooler_schrank.html">
  <figure>
    <figcaption>599€, Kühlschrank, Effizienzklasse B</figcaption>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Open_refrigerator_with_food_at_night.jpg/181px-Open_refrigerator_with_food_at_night.jpg" alt="Kühlschrank"> 
    <p>Edles Kühlmöbel mit jahrzehntelanger Kühltechnik-Erfahrung. Die Patina und leichte Gebrauchsspuren bezeugen den intensiven Einsatz dieses Prachtstücks für die Erhaltung der Lebensmittelfrische<span class="fulltext">. Mit diesem unglaublich günstigen Angebot treiben wir uns selbst in den Ruin, greifen Sie zu, solange es noch möglich ist.</p>
  </figure>
</a>
<a href="cooler_schrank.html">
  <figure>
    <figcaption>799€, Kühlschrank, Effizienzklasse H</figcaption>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Koelkast_open.jpg/180px-Koelkast_open.jpg" alt="Kühlschrank"> 
    <p>Edles Kühlmöbel mit jahrzehntelanger Kühltechnik-Erfahrung. Die Patina und leichte Gebrauchsspuren bezeugen den intensiven Einsatz dieses Prachtstücks für die...

CSS

.preisliste a { display: block;  text-decoration:none; color: black; padding:0.5em; }

.preisliste a:hover, .preisliste a:focus { background-color: #ff8; }
.preisliste figure { margin:0; padding: 0; }
.preisliste figcaption { grid-area: caption; margin:0; padding: 0; font-weight: bold; }
.preisliste img { grid-area: bild; }
.preisliste p { grid-area: text; }

.preisliste.overview a:nth-of-type(2n) { background-color: #ddd;}
.preisliste.overview figure { display: grid; grid-template: "bild caption" "bild text" / auto auto; column-gap: 1em; }
.preisliste.overview figcaption { font-size: 110%; font-weight: bold; }
.preisliste.overview img { max-height: 5em; }
.preisliste.overview p { margin: 0; }
.preisliste.overview p::after { content:"..."; }
.preisliste.overview span.fulltext { display:none; }

.preisliste.textview figure {  }
.preisliste.textview figcaption { font-size: 140%; font-weight: bold; }
.preisliste.textview img { display: none; }
.preisliste.textview p { margin: 0 0.5em 0 0; }

.preisliste.fullview figure { display: grid; grid-template: "caption caption" auto "gap gap" 1em "bild text" auto / auto auto; }
.preisliste.fullview figcaption { font-size: 140%; font-weight: bold; }
.preisliste.fullview img { max-height: 15em; margin-right: 1em; }
.preisliste.fullview p { margin: 0 0.5em 0 0; }

.preisliste.cardview { display: flex; flex-wrap: wrap; }
.preisliste.cardview a { display: block; width: 320px; }
.preisliste.cardview figure { display: grid; grid-template: "bild" "caption" / auto; grid-gap: 0.5em 0; }
.preisliste.cardview figcaption { text-align: center; }
.preisliste.cardview img { margin: auto; }
.preisliste.cardview p { display: none; }

JavaScript

document.addEventListener("click", function(e) {
   if (e.target.tagName != "BUTTON") return;
   let liste = document.querySelector(".preisliste");
   if (!liste) return;
      
   liste.className="preisliste";
   liste.classList.add(e.target.value);
});