JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<div>

<section class=tz>
  <article>1
  </article>
  <article>2
  </article>
  <article>3
  </article>
  <article>…
  </article>
  <article>n
  </article>
  <article>DBUTD
  </article>
</section>


<section class=myz>
<grid>
  <article>1
  </article>
  <article>2
  </article>
  <article>3
  </article>
  <article>4
  </article>
  <article>5
  </article>
  <article>6
  </article>
  <article>7
  </article>
  <article>8
  </article>
  <article>9
  </article>
  <article>10
  </article>
  <article>…
  </article>
  <article>n
  </article>
  </grid>
<category>
<cat>🖊</cat>
<cat>THEMA 1</cat>
<cat>THEMA 2</cat>
<cat>THEMA 3</cat>
<cat>THEMA 4</cat>
</category>
</section>



<section class=beitrag>

<div class=tts>
  Vorlesen (TTS) [ein/aus]
</div>
<div class=av>
  Video/Audio 1
</div>
<div>
Dachzeile/Rubrik/Thema</div>
<div>
<b class=hl>Hier steht die Überschrift</b></div><div>
Text des Beitrags 
Text des Beitrags 
Text des Beitrags 
Text des Beitrags
<u>Link im Text</u>
Text des Beitrags
Text des Beitrags
</div><div class=ac>
Akkordeon 1 [auf/zu]<br>
Text von Akkordeon 1</div>
<div  class=ac>Akkordeon n [auf/zu]<br>
Text von Akkordeon n</div>
<div>
Text des Beitrags 
Text des Beitrags 
Text des Beitrags
Text des Beitrags
</div>


<div class=av>
  Video/Audio 2
</div>
<div>
Text des Beitrags 
Text des Beitrags 
Text des Beitrags
<u>Link im Text</u>
Text des Beitrags
Text des Beitrags
</div>
<div>
Social Embedding / Externer Inhalt
</div>
<div>
<mark>Sendungsbezug</mark>
</div>
<category>
<cat>THEMA 1</cat>
<cat>THEMA 2</cat>
</category>
<div class=reax>
🤯💓😄😡😢</div>
<div>
Link zu Seite Autor:in
</div> 
</section>



</div>

CSS

* {font-family:sans-serif;}
section { border: 4px solid magenta; width:22vw; float:left; margin-right:20px; }
section article { border: 2px solid cyan; padding-top:18px; margin:10px; text-align:center; min-height:140px; text-vertical-align:middle; background-color:lightblue; }
section.tz { width:120; } 

section.myz { border-color:orange;  width:24vw; overflow-x:hidden; }
section.myz grid { display: grid; grid-template-columns: 12vw 12vw; padding-bottom:10px; }
section.myz grid article { border-color:green; margin-bottom:0; }
section.myz grid article:nth-child(2n-1) { margin-right: 1 }
section.myz grid article:nth-child(2n) { margin-left: 1 }

section.beitrag { background-color:khaki; padding:10px; border-color:blue;}
section.beitrag > div { background:rgba(255,255,255,0.88); margin-top:3px;  border:none: text-align:left; }
div.av { height:100px; }
div.av::before { content:'▶'; font-size:36pt;display:block;text-align:center;
} 
.hl {font-size:140%;}
div.tts { text-align:right;}
category { margin:2px; display:block; height:24px; overflow-x:hidden; width:800; overflow-y:hidden;}
cat { line-height:20px; display:inline-block;background-color:black; color:white; border:2px solid black; margin-right:4px; }
div.reax { text-align:center;font-size:136%; }
u { color:blue; }
div.av { background-color:tomato!important; text-align:center;}
div.ac { background-color:silver!important;}