JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<section class="about-me">
<article>
<p>
<x-l>ICH bin eine Weberin aus Norddeutschland,</x-l>
<x-l>zuhause zwischen Ost- und Nordsee.</x-l>
<x-l>Meine innere Heimat ist das Natuschutzgebiet Lauenburg</x-l>
<x-l>mit seinen Seen, Wäldern und stillen Mooren.</x-l>
</p><p>
<x-l>Ich kette meine Werke auf angespülte Schwemmhölzer</x-l>
<x-l>aus Meer und Seen und Fjorden.</x-l>
<x-l>Diese Hölzer haben eine stürmische Lebensgeschichte hinter sich –</x-l>
<x-l>vom Wasser bewegt, gewiegt, geschleudert , gegen Klippen geschlagen, </x-l>
<x-l>von Salz und Sonne gebleicht und gehärtet . . .</x-l>
</p><p>
<x-l>Ich arbeite mit kostbaren, zumeist handgesponnenen Wollen und Garnen </x-l>
<x-l>und verwende Naturmaterialien wie Lochsteine,</x-l>
<x-l>Flechten und Wurzelwerk , Tierhaar und Vlies.</x-l>
<x-l>"Die ganze Natur hilft mir beim Hervorbringen meiner Gestaltungen, </x-l>
<x-l>die ich vom Schöpfungsgrund der Seele heraufhole –</x-l>
<x-l>wie eine Fischerin, die ihr Netz hochzieht.</x-l>
</p><p>
<x-l>Als Webkünstlerin fühle ich mich ausgespannt </x-l>
<x-l>zwischen Himmel und Erde.</x-l>
</p><p>
<x-l>Ich arbeite an einem ganz einfachen Hochrahmen</x-l>
<x-l>ohne jedes technische Hilfsmittel: </x-l>
<x-l>ein ursprüngliches Vorgehen.</x-l>
</p><p>
<x-l>Die senkrecht herabfallende Webkette</x-l>
<x-l>– oben an einem Schwemmholz befestigt –</x-l>
<x-l>ist der Bildträger.</x-l>
<x-l>Diese Webkette, unten an ein Querholz gebunden, </x-l>
<x-l>ist offen, durchlässig, beweglich.</x-l>
<x-l>Von Kettfaden zu Kettfaden ziehe ich die farbigen Fäden</x-l>
<x-l>Herzschlag für Herzschlag hindurch,</x-l>
<x-l>so dass es zu unzähligen Kreuzungen, zur Vernetzung kommt. </x-l>
</p><p>
<x-l>Im Schaffensprozess spüre ich die umfassende Abhängigkeit </x-l>
<x-l>und Geborgenheit allen Lebens im Schöpfungsnetz.</x-l>
<x-l>Wie gefährdet und verletzbar dieses Netz ist, wissen wir inzwischen alle.</x-l>
<x-l>Die Gegensätzlichkeit und Spannung </x-l>
<x-l>zwischen unserer menschlichen...

CSS

.about-me {
  margin: auto;
  display: flex;
  max-width: 80em;
}
.about-me article {
  flex: 1 1 auto;
  columns: 2 20em;
}
.about-me p {
   break-inside: avoid;
}

.about-me x-l {
  display: block;
  padding: 0 0 0 2em;
  text-indent: -2em;
}

.about-me aside {
  flex: 0 1 auto;
}
.about-me img {
  max-height: 100%;
  border-radius: 50px;
}

JavaScript

<