JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<meta name="format-detection" content="telephone=no">
<link href="https://fonts.googleapis.com/css?family=Domine|Open+Sans&display=swap" rel="stylesheet">

<div id="wrapper">
  <div id="container">
    <div id="bernd">
    <div class="avatar">
    

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="158px" height="276.8px" viewBox="0 0 158 276.8" style="enable-background:new 0 0 158 276.8;" xml:space="preserve">
        <style type="text/css">
          .st0 {
            fill: #FFFFFF;
          }

        </style>
        <g id="Ebene_2">
        </g>
        <g id="Ebene_1">
          <g>
            <path class="st0" d="M112.2,109.8c1.5,0,2.9-0.9,3.8-2.8c1.5-2.7,1.6-2.7,2.2-0.5c0.3,1.3,1.1,2.3,1.6,2.3s0.6,1,0.3,2.2    c-0.6,1.8-0.5,2,1.1,1.2c2.9-1.3,10-1,11.8,0.5c2.6,2.2,1.9,7.6-1.9,14.8c-2.7,5.1-3.5,7.8-3.5,11.8c0,4.4-0.4,5.5-3,8    c-2.8,2.7-3.1,2.7-4.8,1.2c-2.1-1.9-3.4-1.3-2.5,1.1c0.5,1.2,0.2,1.4-1.3,0.7c-1-0.5-4.1-0.8-6.7-0.7c-5.1,0.1-7-1.5-4.7-4.3    c0.6-0.8,0.9-2.2,0.6-3.2c-0.3-1-1-5.4-1.6-9.6c-0.5-4.3-1.9-9.9-3-12.4c-2.5-5.8-2.5-8.3,0-9c1.1-0.3,2-1.4,2-2.4    s0.8-2.3,1.8-2.8c1.3-0.8,2.1-0.5,3.5,1.4C109,108.8,110.8,109.8,112.2,109.8z" />
            <path class="st0" d="M110.6,105.8c0,0.5-0.2,1-0.4,1c-0.3,0-0.8-0.5-1.1-1c-0.3-0.6-0.1-1,0.4-1    C110.1,104.8,110.6,105.2,110.6,105.8z" />
            <path class="st0" d="M85.3,157.2c-0.3,0.8,0.3,1.7,1.6,2.1c2.1,0.7,2,0.8-0.6,1.2c-1.6,0.3-4.4-0.3-6.3-1.2c-4-1.9-4.3-2.4-1-1.8    c1.3,0.3,3.2,0,4.3-0.6C85.7,155.5,85.9,155.5,85.3,157.2z" />
            <path class="st0" d="M67.3,255.1c-1,4.5-2.7,11.1-4,14.5l-2.4,6.4l-1.1-7.8c-1-7.2-0.9-8.2,1.3-13.8c1.3-3.4,3.2-7.7,4.2-9.7    l1.8-3.7l0.9,2.9C68.6,245.9,68.4,249.4,67.3,255.1z" />
          </g>
          <g transform="translate(0.000000,404.000000) scale(0.100000,-0.100000)">
            <path class="st0"...

CSS

h1 {
  font-size: 2rem;
  line-height: 1.85;
}

span {
  display: block;
}

span.quote,
span.date {
  display: none;
  float: left;
  font-family: 'Open Sans', sans-serif;
}

span.date {
  font-size: 1rem;
}

span.quote {
  font-size: 1.4rem;
  font-style: italic;
  margin-bottom: 20vw;
}

body {
  background: #000;
  color: #D0D1D5;
  font-family: 'Domine', serif;
  line-height: 1.6;
}

#bernd {
  width: 300px;
  position: relative;
  float: left;
  text-align: center;
}

#bernd .avatar svg {
  min-width: 220px;
  height: auto;

}

#bernd .avatar svg * {
  fill: #FCFCFC;
}

#bernd .onemore {
  display: none;
  position: absolute;
  right: 20px;
  bottom: -10px;
}

.divi {
  border-bottom: 3px solid #333;
  width: 80px;
  margin: 20px 0;

}

#wrapper {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  height: calc(100vh - 50px);
  box-sizing: border-box;
}

#container {
  float: left;
  margin-top: 10vw;
}

#stromberg {
  padding: 0 10px;
  float: left;
}

#thequote {
  width: 100%;
  max-width: 400px;
}

footer {
  width: 100%;
  margin: auto;
  overflow: hidden;
  text-align: center;
  clear: both;
}

footer:before {
  content: "";
  top: -80px;
  position: relative;
  width: 100%;
  display: block;
  height: 40px;
  box-shadow: 0 0 100px rgba(255, 255, 255, 0.5);
  z-index: 0;
}

.ico {
  width: 24px;
  height: auto;
  position: relative;
  display: inline-block;
  margin: 0 20px;
}

.ico *,
span.imprint {
  color: #333;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

span.imprint {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
}

.ico:hover *,
.imprint:hover,
.imprint.active {
  color: #FCFCFC;
}

.donate {
  top: -2px;
}

#imprint {
  max-width: 220px;
  margin: 40px auto;
  display: none;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
}

#imprint strong {
  font-family: 'Domine', serif;
  font-size:...

JavaScript

var data = [{
    date: "01.01.",
    quote: "Ja morgen, bin der Bernd, also Stromberg, Bernd Stromberg, und bin Ressortleiter Schadensregulierung M-Z … meine Hobbys sind Lesen, Schwimmen, Fahrrad fahren und ich grüße meine Tante in Wuppertal …"
  },
  {
    date: "02.01.",
    quote: "Wir sind Kollegen, keine Freunde. Es geht nicht darum, sich gegenseitig die Haare conzu machen oder gemeinsam die Tage zu kriegen."
  },
  {
    date: "03.01.",
    quote: "Wenn du nix im Fenster hast, musst du schon verdammt viel im Laden haben!"
  },
  {
    date: "04.01.",
    quote: "Die besten Jahre kommen doch nach 45! War mit Deutschland ja genauso."
  },
  {
    date: "05.01.",
    quote: "Wenn du dir die Butter vom Brot nehmen lässt, dann hast du irgendwann nicht mal mehr das Brot."
  },
  {
    date: "06.01.",
    quote: "Ich bin ja quasi die perfekte Mischung aus jung, aber sehr erfahren. Gibt’s in der Form ja sonst nur auf dem Straßenstrich."
  },
  {
    date: "07.01.",
    quote: "Büro ist wie Achterbahn fahren, ein ständiges Auf und Ab. Wenn man das 8 Stunden machen muss, TÄGLICH, dann kotzt man irgendwann."
  },
  {
    date: "08.01.",
    quote: "Ich fühle mich wie Jesus am Ostersonntag. Den hatten auch schon alle abgeschrieben und dann nach drei Tagen, so ein richtiges Comeback."
  },
  {
    date: "09.01.",
    quote: "So ’ne Schwangerschaft, das ist ja wie hundert Folgen Lindenstraße im eigenen Körper."
  },
  {
    date: "10.01.",
    quote: "Du tust so als hätt' ich 'nen Salat aus Seehundbabyaugen gemacht."
  },
  {
    date: "11.01.",
    quote: "Schönheit ist ja oft nur 'ne Frage von Licht an oder Licht aus."
  },
  {
    date: "12.01.",
    quote: "Wahrheit hat meistens ganz wenig mit Fakten zu tun. Gefühlte Wahrheit - darum geht`s."
  },
  {
    date: "13.01.",
    quote: "Wenn man mir die Beine weghaut, kann ich immer noch auf den Arschbacken weiter hopsen."
  },
  {
    date: "14.01.",
    quote: "Ich mach`s wie die liebe Gott. Der lässt sich auch nicht...