JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<section>
 <label><input name="kanal" class=hid type="checkbox">
  <div class="card">
    <div class="container">
    <h3>John Doe</h3> 
   </div>
</div>
</label>
</section>

<input type=checkbox id=expanded>
&yen;<input id=filter>
letzter Post
All time Impressions
max reach
ori/unt/inf/
<nav>
  
</nav>

CSS

.card {
  border: 1px solid #dadada;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s; 
  margin:2px;
  float:left;
}

section  {display:none;}

.card h3 {
  padding: 2px;font-size:10pt;
  margin: 0; font-family:sans-serif;font-weight:normal;
}

.card:hover {
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
}
 
.card .container {
  padding: 2px; user-select:none;
}

.card p,.hid {
  margin: 0; display:none;
} 

 #expanded:not(:checked) ~ nav input ~ .card { display:none; }
input:checked ~ .card { display:inline-block!important;  background:cyan; }

JavaScript

var item=$("section label");

var f=[
  "DIE DA OBEN!",
  "Shapira Shapira",
  "Glanz&Natur",
  "Pocket Money",
  "Deutschland3000 - ‘ne gute Stunde mit Eva Schulz",
  "Same",
  "100percentme",
  "OZON",
  "Vibes - Hugs & Hypes",
  "Kopfstimme",
  "Franziska Schreiber",
  "flowingbody",
  "Korner",
  "Mordlust",
  "littlerebelle",
  "REWIND",
  "Goergy",
  "iss bunter",
  "nisi156",
  "Doppelpunkt",
  "Rebecca Gubitzer",
  "Softie",
  "#Move2",
  "Hookline",
  "Einigkeit & Rap & Freiheit",
  "funk Politik",
  "Mädelsabende",
  "Stories. Der Buch-Podcast",
  "mynoupa",
  "Bingo Flamingo",
  "Okay",
  "PlusPlusPlus",
  "alwaysxcaro",
  "dimxoo",
  "Manu Thiele",
  "Schruppert",
  "WEIL ISSO",
  "die wohngemeinschaft",
  "Pen&Paper",
  "reporter",
  "STRG_F",
  "Cinema Strikes Back",
  "Bubbles",
  "Kurzgesagt",
  "Phil Laude",
  "MrWissen2go",
  "Deutschland3000",
  "follow me.reports",
  "Das schaffst du nie!",
  "Auf Klo",
  "Bohemian Browser Ballett",
  "Bongo Boulevard",
  "Coldmirror",
  "Datteltäter",
  "Die Frage",
  "funk Life",
  "Game Two",
  "GERMANIA",
  "Guten Morgen, Internet!",
  "iam.serafina",
  "INFORMR",
  "Jäger & Sammler",
  "Kliemannsland",
  "Kostas Kind",
  "LiDiRo",
  "maiLab",
  "musstewissen",
  "offen un' ehrlich",
  "Rayk Anders",
  "Walulis",
  "World Wide Wohnzimmer",
  "WUMMS",
  "Y-Kollektiv",
  "True Demon",
  "DRUCK",
  "Eugen Spanck",
  "Patchwork Gangsta",
  "Doctor Who",
  "The Job Lot",
  "Threesome",
  "Fashion Future Berlin",
  "Klicknapped",
  "Projekt:Horizont",
  "Straight Family",
  "FREAKS",
  "Hit and Run",
  "OFFSCREEN - die Serie",
  "Country Girls",
  "Wishlist",
  "Girl Cave",
  "Carola Christmas",
  "Der Wedding kommt",
  "Finalclash",
  "King of Westberg",
  "SUPERPOLYPSYCHOLUM",
  "Fayvourite Horse",
  "S.O.S. - Sick of Silence",
  "WACH",
  "plan&los",
  "Boah Bergmann!",
  "Koch ma!",
  "Auf einen Kaffee mit Moritz Neumeier",
  "B.A.",
  "Simon...