JSFiddle - React, Tailwind, and code Playground

by maxim lensky

HTML

<div class="wrapper"> 
  <div class="item">
    <div class="item1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolorem ipsa, sequi quasi neque ipsum magni consequatur deleniti fugit nihil, vero quas, fuga ab asperiores dolore quod deserunt! Harum, cum.
    </div>
    <div class="item2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolorem ipsa, sequi quasi neque ipsum magni consequatur deleniti fugit nihil, vero quas, fuga ab asperiores dolore quod deserunt! Harum, cum.    
    </div>
    <div class="item3">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolorem ipsa, sequi quasi neque ipsum magni consequatur deleniti fugit nihil, vero quas, fuga ab asperiores dolore quod deserunt! Harum, cum.     
    </div>
  </div>
  <div class="item item__svg">
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="0 0 166 214">
  <defs
     id="defs2">
    <marker
       style="overflow:visible"
       id="marker3517"
       refX="0"
       refY="0"
       orient="auto">
      <path
         transform="matrix(0.8,0,0,0.8,10,0)"
         style="fill:#00bdcb;fill-opacity:1;fill-rule:evenodd;stroke:#00bdcb;stroke-width:1.00000003pt;stroke-opacity:1"
         d="M 0,0 5,-5 -12.5,0 5,5 Z"
         id="path3515" />
    </marker>
    <marker
       orient="auto"
       refY="0"
       refX="0"
       id="marker3355"
       style="overflow:visible">
      <path
         id="path3353"
         d="M 0,0 5,-5 -12.5,0 5,5 Z"
         style="fill:#ff5e94;fill-opacity:1;fill-rule:evenodd;stroke:#ff5e94;stroke-width:1.00000003pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,10,0)" />
    </marker>
    <marker
       style="overflow:visible"
       id="marker3145"
       refX="0"
       refY="0"
    ...

CSS

*{
  margin:0;
}
.wrapper{
  width:90%;
  margin:auto;
  display:flex;
  justify-content:space-around;
  align-items:center;
}
.item:nth-child(2){
  width:50%;
  height:400px;
}
.item:first-child,
.item:last-child{
  width:50%;
  padding:10px;
  display:flex;
  flex-direction:column;
}
.item:first-child{
 font-size:16px;
  transform:translateY(40px);
}
.item:last-child{
  transform:translateY(100px);
}

.item:first-child div{
  margin:30px 0;
}
.item:last-child div{
  margin:30px 0;
}